display: inline-block 添加垂直填充答案

【问题标题】：display: inline-block adds vertical paddingdisplay: inline-block 添加垂直填充
【发布时间】：2018-01-29 20:19:28
【问题描述】：

我有以下 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）：

那么这个垂直填充是从哪里来的呢？

【问题讨论】：

这个问题已经在：stackoverflow.com/questions/27618000/…

标签： html css padding

【解决方案1】：

填充来自您的无序列表和折叠边距。当父级 (div.row) 上没有 display: inline-block 时，该 div 默认显示为块元素，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> 上的边距设置为零。

【讨论】：

【解决方案2】：

边距来自ul 的默认边距，每当我从ul 中删除边距时，它就会按照您的意愿对齐。

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

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

【讨论】：