Html div/span（a）边框底部：不同尺寸的间隙

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

我尝试在下划线中添加一些行（我希望它保持在以下位置）：

.划线{
边框底部：1px点蓝色；
边际：0px；
填充：0px；
大纲：0px；
轮廓偏移量：0px；
框大小：边框框；
高度：21px；/*为全身线条高度*/
}

它现在仍然在基线网格中，但差距仍然不一样(

有人有主意吗

---

非常感谢！

您的问题可能会出现，因为默认情况下，

div

标记具有

display:block

，而

span

标记具有

display:inline

。为了避免这种情况，只需向

类添加
display:block
或您可能需要的任何其他值


。下划线{
边框底部：1px点蓝色；
}
划线{
显示：内联块；
}
带下划线的文本



带下划线的文本
span
标记是一个内联元素，这意味着您不能为其设置高度

为了使其工作，将
显示：内联块
或
显示：块
添加到
下划线
类中


。下划线{
边框底部：1px点蓝色；
边际：0px；
填充：0px；
大纲：0px；
轮廓偏移量：0px；
框大小：边框框；
高度：21px；/*为全身线条高度*/
显示：内联块；
}
带下划线的文本



带下划线的文本
需要为两个元素应用
显示：内联块；
。然后将解决行高问题


。下划线{
边框底部：1px点蓝色；
边际：0px；
填充：0px；
大纲：0px；
轮廓偏移量：0px；
框大小：边框框；
高度：21px；/*为全身线条高度*/
显示：内联块；
背景色：#ccc；
}
带下划线的分区{
宽度：100%；
}
带下划线的文本



下划线文本
看，我发现它与字体大小有关：但我还是不明白。@g014m，试试下面的答案。它可能对你有用。谢谢，但我希望跨度仅为内容宽度和div 100%。现在它都是100%看，我发现它与字体大小有关：w3schools.com/code/tryit.asp？filename=FUEG6OPDAIYR，但我仍然我不明白。要这样做，请将span设置为
display:inline block
，并保留div的默认显示。我编辑了答案以显示我的意思（span带有
。下划线的
类），但您始终可以使用另一个类。谢谢。现在间距是相同的！但div和span的间距现在都比原始span大（这对于保持整体基线网格非常重要）：jsfiddle.net/czmobgf9/6cool差距非常大，但是如果它是一个div“下划线”，则边框底部也应该是100%（不仅仅是看不见的父框）。对不起，我不是母语人士，不知道如何解释well@g014m，这就是你解释的吗？检查一下，让我知道。
<style>
.underlined {
  border-bottom: 1px dotted blue;
}
</style>

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

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