display：inline-block添加垂直填充

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）上显示：inline-block，则该div默认显示为块元素和margins collapse。您可以通过将overflow: auto添加到div.row元素来应用折叠边距的标准补救措施来看到这一点。

＆＃13;

＆＃13;

* {
  -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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

摆脱额外空间的最简单方法是在<ul>上将边距设置为零。

Answer 2

保证金来自ul的默认保证金，每当我从ul移除保证金时，它就会按照您的意愿调整。

＆＃13;

＆＃13;

* {
  -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;
  margin: 0;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;