Question

css如何设置div子容器之间的间距

例如：
<div>
<div></div>
<div></div>
<div></div>
</div>
如何设置里面3个子容器相距的垂直距离
div 显示在最外层。如何设置，比如我现在有多个div。当鼠标移动到某个div时，最外层显示。
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 1

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：.sub{margin-top: 30px;}。

3、浏览器运行index.html页面，此时3个div子子容器的垂直间距被统一设置为了30px。

Answer 2

1、使用css的margin属性设置。首先打开hbuilder软件，新建一个html文件，在html里面写入html结构，在给每个子div设置一个class属性：

2、接着在上方的style标签中设置这个名叫div的class的css样式，这里把文字字号放大并加入了边框，然后就可以使用margin属性设置子容器之间的间距了，margin中前面的是设置上下间距，后面的则是左右间距，最后根据自己的需要设置即可：

3、来到浏览器即可看到效果，三个div的间距都是20px。以上就是cs设置div子容器之间的间距的方法：

Answer 3

用padding 属性来控制 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

  
·语法结构

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding：10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

用margin 属性来控制：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离

  ·语法结构

（1）margin-left:10px; 左外边距

（2）margin-right:10px; 右外边距

（3）margin-top:10px; 上外边距

（4）margin-bottom:10px; 下外边距

（5）margin:10px; 四边统一外边距

（6）margin:10px 20px; 上下、左右外边距

（7）margin:10px 20px 30px; 上、左右、下外边距

（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

  margin和padding的区别用图表示为：

Answer 4

<div>
<div style='margin-top:10px;margin-bottom:10px;"></div>
<div style='margin-top:10px;margin-bottom:10px;"></div>
<div style='margin-top:10px;margin-bottom:10px;"></div>
</div>
每个层距顶部10个像素，距底部10个像素。

Answer 5

一般是用margin来设置的，可以写用CSS写样式，或者直接在HTML标签里加style
例如：<div style="margin:15px"></div>不过这个的话就每个标签里都要加哦，比较麻烦的，如果做简单的页面的话就没事了。