如何在两个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;}