如何消除容器与inline-block子元素间的底部空白？

你遇到的底部空白由两个原因导致：一是<p>标签自带默认的margin-bottom，二是inline-block元素默认以**基线（baseline）**对齐，会在底部预留空间。以下是几种可行的解决方法：

方法一：修正垂直对齐方式 + 清除p标签默认边距 #

这是最直接的方案，同时解决两个问题：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.parent {
  border: 5px solid black;
}

.child {
  border: 5px solid red;
  display: inline-block;
  width: 50%;
  vertical-align: top; /* 改变inline-block的垂直对齐方式，消除基线留白 */
}

.child p {
  margin: 0; /* 清除p标签的默认上下边距 */
}

方法二：父容器设置font-size: 0 #

通过消除父容器的字体大小，去掉inline-block元素的基线留白，再为子元素恢复字体大小：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.parent {
  border: 5px solid black;
  font-size: 0; /* 消除基线留白 */
}

.child {
  border: 5px solid red;
  display: inline-block;
  width: 50%;
  font-size: 16px; /* 恢复子元素字体大小 */
}

.child p {
  margin: 0; /* 清除p标签默认边距 */
}

方法三：改用flex布局 #

如果不需要兼容旧浏览器，直接用flex布局可以彻底避免这类inline-block的对齐问题：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.parent {
  border: 5px solid black;
  display: flex; /* 父容器设为flex */
}

.child {
  border: 5px solid red;
  width: 50%;
}

.child p {
  margin: 0; /* 清除p标签默认边距 */
}

之前设置子元素margin:0无效，是因为空白并非来自子元素的外边距，而是inline-block的对齐规则和p标签的默认样式导致的。

内容的提问来源于stack exchange，提问作者user15064770