css上下排列的div缝隙

使用CSS进行DIV上下排列是前端开发中经常会遇到的问题。

因为DIV元素默认是左右排列的，所以如果需要实现垂直方向的布局，就需要对其进行样式设置。

有时候会发现在两个DIV元素上下排列时，它们之间可能会存在一定的缝隙。这是因为在默认情况下，DIV元素之间会有一定的外边距（margin）值。

 div {
    margin: 10px 0;
  } 

上述代码是给DIV元素设置了垂直方向上的外边距值，上下各是10像素。

如果两个DIV元素之间的缝隙太过明显，可以通过设置margin的负值或设置padding来解决。

 /*给第一个DIV元素设置下外边距，第二个DIV元素设置上内边距*/
  div:first-child {
    margin-bottom: -10px;
  }
  div:last-child {
    padding-top: 10px;
  } 

上述代码是通过设置第一个DIV元素的下外边距和第二个DIV元素的上内边距来消除它们之间的缝隙。

总之，要想解决DIV上下排列出现的缝隙问题，需要灵活运用CSS样式进行设置。