html - 显示: inline-block adds vertical padding

Question

我有以下 HTML 和 CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

当我在 CSS 中使用 inline-block 时，它看起来像这样:

但如果没有 display:inline-block ，它看起来像这样(这完全没问题，假设默认情况下显示是 block ):

那么这个垂直内边距从何而来？

Answer 1

填充来自无序列表和折叠边距。当父级 (div.row) 上没有 display: inline-block 时，该 div 默认显示为 block 元素，并且 margins collapse 。您可以通过添加 overflow: auto 应用折叠边距的标准补救措施来看到这一点。到 div.row 元素。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: red;
  /* display: inline-block; */
  overflow:auto;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  border: 2px solid green;
  display: inline-block;
  margin: 0;
  padding: 15px;
}

<div class="row">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>one</li>
  </ul>
</div>

消除多余空间的最简单方法是将 <ul> 上的边距设置为零。 .