行高设置为0，为什么行之间有空格？答案

【问题标题】：Line height is set to 0, why is there space between lines?行高设置为0，为什么行之间有空格？
【发布时间】：2015-01-20 02:58:27
【问题描述】：

简短的问题：为什么底线之间有垂直空间，而不是上线？我不想要垂直空间。

TL;DR

在 Firefox 和 Chrome 中的行为相同，因此不太可能是错误，但显然我不明白。

虽然我知道 .wrap3 的字体大小比以前的大，但行高为零，并根据调试器以这种方式计算。还要注意，虽然文本是 16pt，但它的 line-height 计算为 19.2pt，这与 wrap1 的 font-size 非常接近。进一步注意 .wrap2 使用 40pt 字体...超过两倍大，但对行距没有影响。但大于 40pt，出现空间。 .wrap3 使用 60pt，这会产生明显可见的垂直空间……但远小于 60pt。

我读过关于 struts 的 here，另一个类似的问题是 here。并且有大量信息和几种技术可以消除内联和内联块元素之间的空间，我已经在适当的情况下成功地使用了它们。

然而，现在，我面临另一种情况......需要内联元素之间的空间，以在流体布局中工作以提供元素之间的空间。虽然我在 sn-p 中有一个
，但想象一下列表中的项目远不止 4 个，以及不同大小的浏览器窗口或设备屏幕。

我想要做的是改变内联元素之间的间距，这是 .wrapN 字体大小的四分之一，这对我有利。用填充或边距将这些项目分开将不允许一行上的最后一个项目到达窗口的最右边缘，也不允许下一行的第一个项目到达窗口的最左边缘，尽管解决方案使用填充或边距或其他东西都可以，只要在适当的情况下可以到达窗口的两侧。

body { margin: 0; padding: 0; }

.wrap1 { font-size: 20pt; line-height: 0; }
.wrap2 { font-size: 40pt; line-height: 0; }
.wrap3 { font-size: 60pt; line-height: 0; }
.foo2 { display: inline-block; line-height: 0; font-size: 0; }
.foo2 p {
}
.foo2 span {
  font-size: 16pt;
  line-height: 1.2;
  display: block;
  background: #ccc;
}

<div class="wrap1">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
<div class="wrap2">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
<div class="wrap3">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

如果您想移除垂直空间，请将vertical-align property 更改为默认值baseline (vertical-align: baseline) 以外的其他值。

.foo2 {
    vertical-align: top;
}

当值设置为baseline这个垂直空间是reserved for letters比如j,y,p,q。

body {
  margin: 0;
  padding: 0;
}
.wrap1 {
  font-size: 20pt;
  line-height: 0;
}
.wrap2 {
  font-size: 40pt;
  line-height: 0;
}
.wrap3 {
  font-size: 60pt;
  line-height: 0;
}
.foo2 {
  display: inline-block;
  line-height: 0;
  font-size: 0;
  vertical-align: top;
}
.foo2 p {} .foo2 span {
  font-size: 16pt;
  line-height: 1.2;
  display: block;
  background: #ccc;
}

<div class="wrap1">
  <div class="foo2">
    <p><span>text1</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>2text</span>
    </p>
  </div>
  <br>
  <div class="foo2">
    <p><span>3biggertext</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>4text</span>
    </p>
  </div>
</div>
<div class="wrap2">
  <div class="foo2">
    <p><span>text1</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>2text</span>
    </p>
  </div>
  <br>
  <div class="foo2">
    <p><span>3biggertext</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>4text</span>
    </p>
  </div>
</div>
<div class="wrap3">
  <div class="foo2">
    <p><span>text1</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>2text</span>
    </p>
  </div>
  <br>
  <div class="foo2">
    <p><span>3biggertext</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>4text</span>
    </p>
  </div>
</div>

【讨论】：

啊哈！谢谢。解释和治疗！有没有办法使用js获取基线值或者在浏览器调试器中查看？
@Victoria 在 Chrome 中，我通常只查看“Computed”样式（这允许我确定默认值..）。如果您想动态检索值，请尝试类似jsfiddle.net/drj2vq5c
有趣。不过，这似乎是基线调整，而不是基线本身。当它是默认值时，vertical-align 似乎不会出现，但当它不是时会出现。虽然计算的样式显示了行高，但它们似乎没有显示基线在该行高内的位置，也没有显示上升或下降是什么。这些信息可能帮助我弄清楚我的问题？虽然我已将 line-height 设置为 0...并且该空间似乎是一些不可见的计算下降保留...

【解决方案2】：

我不知道这是否是您正在寻找的解决方案，但您可以将每一行单独包装，然后像这样使用 padding-bottom 做一些事情

body { margin: 0; padding: 0; }

.wrap1 { font-size: 20pt; line-height: 0; padding-bottom: 10;}

【讨论】：