2つのdivの間にスペースを追加するにはどうすればよいですか？

Question

私はウェブページをデザインしていますが、私はHTML/CSS初心者です。私は次のフォーマットが欲しい：

上半分、下半分。

上半分には6つの大きなボックスがあり、3つのボックスで2つの列に編成されています。

下半分には、何か他のコンテンツが含まれています。

今のところ私は（何とか）働いていますが、唯一のことは "top_half"に近すぎることです - ちょうど間に余裕を追加したいだけです。しかし、私がやってみると奇妙なことが起こり、私が間違っていることを理解していません。ここで

は私のHTMLレイアウトの概要です：

<div class="top_half"> 
    <div class="left_half"> 
    <div class="big_box"> 
     <!-- box 1 content --> 
    </div> 
    <div class="big_box"> 
     <!-- box 2 content --> 
    </div> 
    <div class="big_box"> 
     <!-- box 3 content --> 
    </div> 
    </div> <!-- left-half --> 
    <div class="right_half"> 
    <div class="big_box"> 
     <!-- box 4 content --> 
    </div> 
    <div class="big_box"> 
     <!-- box 5 content --> 
    </div> 
    <div class="big_box"> 
     <!-- box 6 content --> 
    </div> 
    </div> <!-- right-half --> 
</div> <!-- top-half --> 

<div class="bottom_half"> 
    <!-- bottom-half content --> 
</div> 

上部と下部の半分のための私のCSSは次のようになります。

.top_half { 
    height: auto; 
    width: auto; 
    margin-top: 70px; 
    padding-top: 70px; 
    background: lightgreen 
} 

.bottom_half { 
    height: auto; 
    width: auto; 
    margin-top: 70px; 
    padding-top: 70px; 
    background: lightyellow; 
} 

奇妙なことに、top_half divのは、ちょうどかなり小さなバーですページの上部、bottom_half divは基本的にページ全体を取ります。

レイアウトが悪いですか？私は違うやり方をしなければならないだろうか？私は本当にこれを全く経験していないので、私は一緒に勉強しています。

ありがとうございます！

編集：

いくつかのタイプミスを修正しました。これを見て、私が何を意味するかを見てみましょう：https://jsfiddle.net/d7ejv3ad/3/ ^^なぜ、灰色のボックスは緑色のバーの中にとどまっていませんか？

Answer 1

デモ：https://jsfiddle.net/d7ejv3ad/

HTML

<main> 
    <div> 
    <div> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
    </div> 

    <div> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
    </div> 
    </div> 

    <div> 
    Content 
    </div> 
</main> 

CSS

これは <div class="left_half"> ようにする必要がありますHTMLコード <div class="left_half>の2行目のタイピングエラーがある

main > div:first-child { 
    height: 50vh; 
    width: auto; 
    background: lightgreen 
} 
    main > div:first-child > div { display: inline-block; height: 100%; width: 49%; } 
    main > div:first-child .boxes { 
     margin: 2.5% 0 0 2.5%; 
     width: 28%; 
     height: 28%; 
     background: #fff; 
    } 

main > div:last-child { 
    height: 50vh; 
    width: auto; 
    padding: 50px; 
    background: lightyellow; 
} 

Answer 2

は、さらにこの1行を追加します。あなたのCSSで

.big_box{display:inline;}