Question

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

TL; DR

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

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

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

然而，现在，我正面临另一种情况......需要内联元素之间的空间，以流体布局工作以在元素之间提供空间。虽然我有一个＆lt; br＆gt;在代码段中，想象一下列表中的项目数量远远超过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>

Answer 1

如果您要删除垂直空间，请将vertical-align property更改为默认值baseline（vertical-align: baseline）以外的其他值。

.foo2 {
    vertical-align: top;
}

当值设置为baseline时，此垂直空间为reserved for letters，例如j，y，p，q。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我不知道这是否是你正在寻找的解决方案，但你可以让每一行分开包装，然后用这样的padding-bottom做一些事情

body { margin: 0; padding: 0; }

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

线高设置为0，为什么线之间有空格？

2 个答案: