Question

我有一个名为带下划线的类：

<style>
.underlined {
  border-bottom: 1px dotted blue;
}
</style>

但是比较此类的span和div时，文本和笔画之间的间隙大小不同：

<span class="underlined">underlined text</span><br>
<br>
<div class="underlined">underlined text</div>

我试图在带下划线的中添加一些行（我希望它保留在baseline grid中）：

<style>
.underlined {
  border-bottom: 1px dotted blue;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  outline-offset: 0px;
  box-sizing: border-box;
  height: 21px;  /* which is the whole body's line height*/
}
</style>

它现在仍在基准网格中，但是差距仍然不一样。：（

有人有主意吗？

非常感谢您！

Answer 1

您的问题可能会发生，因为默认情况下div标签具有display: block，而span标签具有display: inline。为了避免这种情况，只需将display: block类添加到您的.underlined类中即可。

.underlined {
  border-bottom: 1px dotted blue;
}

span.underlined {
  display: inline-block;
}

<span class="underlined">underlined text</span><br>
<br>
<div class="underlined">underlined text</div>

Answer 2

span标签是一个内联元素，这意味着您无法为其设置高度，

为了使其正常工作，请向display:inline-block类添加display:block或underline

.underlined {
  border-bottom: 1px dotted blue;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  outline-offset: 0px;
  box-sizing: border-box;
  height: 21px;  /* which is the whole body's line height*/
  display: inline-block;
}

<span class="underlined">underlined text</span><br>
<br>
<div class="underlined">underlined text</div>

Answer 3

两个元素都需要应用display:inline-block;。然后，线高问题将得到解决。

.underlined {
  border-bottom: 1px dotted blue;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  outline-offset: 0px;
  box-sizing: border-box;
  height: 21px;  /* which is the whole body's line height*/
  display:inline-block;
  background-color:#ccc;
}

div.underlined {
  width:100%;
}

<span class="underlined">underlined text</span><br>
<br>
<div class="underlined">underlined text</div>

https://jsfiddle.net/Sampath_Madhuranga/aLurpoxy/6/

这对您有用。尝试一下，让我知道是否有任何问题。谢谢。

div / span（a）边框底部：不同大小的间隙

3 个答案: