[分享]css两个div上下有间隔

CSS是前端开发必不可少的技能之一，今天我们来谈一下如何使用CSS实现两个DIV上下有间隔。首先，我们需要了解什么是DIV。DIV是一个没有任何默认属性的块级元素，我们可以用它来包裹其他标签或内容，给...

CSS是前端开发必不可少的技能之一，今天我们来谈一下如何使用CSS实现两个DIV上下有间隔。

首先，我们需要了解什么是DIV。DIV是一个没有任何默认属性的块级元素，我们可以用它来包裹其他标签或内容，给予样式。

<div>
  <p>这是一段文字</p>
  <img src="example.jpg">
</div>

上述代码中，我们将一段文字和一个图片都包裹在了一个div中，这样我们就可以利用CSS来处理它们之间的间隔。

接下来，我们使用CSS中的margin属性来实现两个DIV上下的间隔。我们可以在第一个DIV中设定一个下边距（如20px），并在第二个DIV中设定一个上边距（同样为20px），这样就可以实现它们之间的间隔。

div:first-child {
  margin-bottom: 20px;
}

div:last-child {
  margin-top: 20px;
}

以上代码中，我们利用了:first-child和:last-child伪类选中了第一个和最后一个DIV，并在它们上分别设置了下边距和上边距，实现了两个DIV之间的间隔。

总结起来，我们可以使用CSS中的margin属性来实现两个DIV上下的间隔，只需要在第一个DIV中设置下边距，第二个DIV中设置上边距即可。