如何在兩個div之間添加空格？

Question

我在設計一個網頁，但我是一個HTML/CSS的新手。我想要以下格式：

上半部分和下半部分。

上半部分包含6個大箱子，組織成兩列3個箱子。

下半部分包含一些其他內容，無論我想要什麼。

現在我（以某種方式）使它工作，但唯一的是「bottom_half」太接近「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

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

存在的HTML代碼<div class="left_half>第二行打字錯誤，這應該是像<div class="left_half"> 另外添加這一行在您的CSS

.big_box{display:inline;}