[分享]css两个div间距

在 CSS 中，设置两个 div 元素之间的距离可以使用 margin 属性。margin 属性有四个值：上方距离、右侧距离、下方距离和左侧距离。可以使用以下方法设置两个 div 元素之间的距离：di...

在 CSS 中，设置两个 div 元素之间的距离可以使用 margin 属性。

margin 属性有四个值：上方距离、右侧距离、下方距离和左侧距离。可以使用以下方法设置两个 div 元素之间的距离：

div {
  margin-bottom: 10px; /* 第一个 div 元素的下方距离 */
}
div + div {
  margin-top: 10px; /* 第二个 div 元素的上方距离 */
} 

在这里，CSS 选择器 div + div 表示第二个 div 元素。这里使用的是相邻兄弟选择器（Adjacent Sibling Selector），它选择满足两个条件的元素：该元素是其前面的兄弟元素的下一个元素，并且类似于指定的选择器。

你也可以使用 margin-top 和 margin-bottom 属性来设置两个 div 元素之间的距离，如下所示：

div {
  margin-bottom: 10px; /* 第一个 div 元素的下方距离 */
}
div:last-child {
  margin-bottom: 0; /* 最后一个 div 元素不需要下方距离 */
} 

在这里，我们利用了 :last-child 伪类选择器来选择页面上的最后一个 div 元素。因为它是最后一个元素，所以不需要下方距离。

总之，CSS 的 margin 属性提供了多种设置两个或更多元素之间距离的方法。无论你选择哪种方式，记得保持一致性，确保你的网站外观整洁和整齐。