1、首先打开hbuilder软件，新建一个html文件，在html里面写入html结构，在给每个子div设置一个class属性。2、接着在上方的style标签中设置这个名叫div的class的css样式，这里把文字字号放大并加入了边框，然后就可以使用margin属性设置子容器之间的间距了，margin中前面的是设置上下间距，后面的则是左右间距，最后根据自己的需要设置即可。3、来到浏览器即可看到效果，三个div的间距都是20px。以上就是cs设置div子容器之间的间距的方法。
CSS定义模块与模块之间的距离，现在的布局一般都是通过div+css来布局，定义好每个块的宽度和高度，设置每个块的距离话，我们通过margin这个属性来设置，margin的用法如图：
我们可以通过代码来理解：
<html>
<head>
<style>
.headr{
width:300px
height:200px
border:1px solid #f00
}
.wenzi{
width:300px
height:200px
marign-top:10px //设置好距离上的距离就可以了
}
</head>
<body>
<div class="headr" > //页头
<p>我的测试</p>
</div>
<div class='wenzi'>
<p>我的数据</p>
</div>
</body>
</html>
