html - 为什么在嵌入式块之间会出现垂直和水平间隙？

.blockType {
  display: block;
  background-color: yellow;
}

.inlineType {
  display: inline;
  background-color: skyblue;
  font-size: 40px;
}

.inlineBlockType {
  display: inline-block;
  background-color: orange;
  height: 100px;
  width: 100px;
}

<body>
  <div class="blockType">
    block1
  </div>
  <div class="inlineType">
    inline1
  </div>
  <div class="inlineBlockType">
    inline-block1
  </div>
  <div class="inlineType">
    inline2
  </div>
  <div class="blockType">
    block2
  </div>
</body>

CodePen：https://codepen.io/1sharth/pen/qBdaKGe?editors=1100

我注意到，每当更改inline1元素的字体大小时，这些间距都会改变。我不知道为什么会这样。

为什么在嵌入式块之间会出现垂直和水平间隙？

0 个答案: