Question

CSS 两个DIV在同一列中 如何上下有间距

Answer 1

元素之间的边距可以使用margin来实现：

margin:top right bottom left; /*分别为上右下左边距*/

这属于CSS 框模型 (Box Model)—— 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式：

• 围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

• 元素的内边距在边框和内容区之间，控制该区域最简单的属性是 padding 属性，可以接受长度值或百分比值，但不允许使用负值。

• 元素的边框是围绕元素内容和内边距的一条或多条线，可以使用 border 属性来规定元素边框的样式、宽度和颜色。

下面举个简单的例子：

1. 在Html代码中添加两个div

   <div></div><div></div>

2. 设置css样式

   div{width:250px;height:50px;border:2px solid #ccc;margin:50px 80px;}

3. 观察效果

   

Answer 2

把DIV想成一个盒子，盒子边界外的间距是margin，边界内的是padding,如果上下相邻的2个DIV都有margin，取的值是比较大的那个。

Answer 3

<div style="margin:20px">...</div>
<div style="margin:20px">...</div>

Answer 4

<div style="margin:20px 0">...</div>
<div style="margin:20px 0">...</div>

Answer 5

只需要设置其中一个margin值即可