css 父级有空隙间隙

在CSS中，当我们设置一个元素的宽度、高度、边框、内边距等属性时，父元素会自动包裹它，并且保留一定的空隙。这个空隙可能会导致页面布局的错乱，影响页面的美观度。

  .parent {
    background-color: gray;
    padding: 10px;
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: blue;
  }

在上面的代码中，parent是child的父元素，设置了10px的内边距。假设child元素的宽高都是100px，但是在实际效果中，它的位置会有一定的偏差，这是因为父元素的空隙影响了child元素的位置。

为了避免这种情况的产生，我们可以使用以下两种方法：

  .parent {
    background-color: gray;
    padding: 10px;
    font-size: 0; /* 方法一 */
  }

第一种方法是将父元素的字体大小设置为0。这样可以避免空隙，但同时也会使文本内容变得不可见。因此需要在子元素中重新设置字体大小。

  .parent {
    background-color: gray;
    padding: 10px;
    display: flex; /* 方法二 */
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-right: 10px;
  }

  .child:last-child {
    margin-right: 0;
  }

第二种方法是将父元素的display属性设置为flex。这样可以让子元素自动对齐，避免空隙的产生。但是需要注意的是，如果子元素之间有间隔，需要手动设置margin或者padding，否则会出现布局错乱的问题。