我的代码在这里： https://jsfiddle.net/krbomcj5/
对于CSS专业人士来说，它很小，不言自明。
问题是，我期待.main-content和.head-content之间有一个空间.
我可以通过向.main-content添加填充来实现它。
如果我想在.main-content和.head-content之间留出一个空格，那么替代最佳实践是什么
对.main-content使用display: block; overflow: hidden
.main-content {
background-color: #28AFB0;
width: 99%;
height : 1000px;
text-align: center;
margin: 10px auto;
display: block; overflow: hidden;}
.head-content {
background-color: #1F271B;
height: 90px;
width: 95%;
margin: 150px auto; }
这是代码笔
将display: inline-block;设置为头部
.main-content {
background-color: #28AFB0;
width: 99%;
height : 1000px;
text-align: center;
margin: 10px auto;
}
.head-content {
display: inline-block;
background-color: #1F271B;
height: 90px;
width: 95%;
margin: 10px auto;
}<body>
<section class="main-content">
<header class="head-content">
</header>
</section>
</body>填充是要走的路。您还可以使用top属性，该属性需要进行一些调整。
为header设置display: block可以解决示例中的问题。
关于使用 css 布局的好教程：http://learnlayout.com/。