如何移除两个<div>标签间空白？解决inline-block文本对齐错乱问题

看起来你碰到的是inline/inline-block元素间的空白字符问题——浏览器会把HTML里的换行、空格解析成一个空白字符，这就是你死活消不掉空白的原因，而直接用inline-block又搞乱了对齐。给你几个实用的解决办法，按推荐程度排序：

1. 用Flexbox布局（强烈推荐） #

这是现代CSS里最省心的方案，既能消除空白，又能完美控制对齐。给你的父容器（比如.row）加上flex属性就行：

.row {
  display: flex;
  /* 要是需要垂直对齐，加这个，值可以是center/start/end等 */
  align-items: center;
}

这样不管你的HTML里有没有换行空格，子元素之间的空白都会被自动消除，而且对齐问题完全可以通过flex的各种属性调整，比inline-block好用太多。

2. 父元素设font-size: 0，子元素重置字体 #

你之前可能没找对父元素？试试给包含这两个div的父容器（比如.row）设font-size: 0，然后给子div（.pricing-title和内容div）重新设置你需要的字体大小：

.row {
  font-size: 0;
}
.pricing-title, .content-div {
  font-size: 16px; /* 换成你实际需要的字号 */
}

原理是把父元素里的空白字符大小设为0，子元素的字体不受影响，这样空白就消失了。

3. 移除HTML里的换行/空格 #

把两个div的标签写在同一行，直接干掉HTML里的空白源：

<div class="pricing-title"><h1>Select Your Membership Options</h1></div><div class="content-div">你的内容...</div>

这个方法最直接，但会让HTML代码看起来有点挤，适合追求极简的场景。

为什么你之前设margin没用？ #

因为这个空白不是margin导致的，是浏览器解析HTML时生成的空白字符，所以调margin根本碰不到问题根源。而inline-block虽然能让空白显现（也能通过上面的方法消除），但它的默认对齐方式是基线对齐，很容易出现文本错位，这就是你碰到的对齐错乱问题。

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