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

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

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 2

你的问题可能会发生，因为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 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/

这适合你。尝试这个，让我知道是否有任何问题。谢谢。