Question

我正在尝试使<div>内的文本触及其边界的顶部，而不会像position: absolute那样使用任何“被黑”的解决方案，等等。

我尝试将0px添加到其填充和边距中，但似乎无法弄清楚。有没有想到的简单解决方案吗？

<div style="border: 1px solid red; height: 50px; width: 100%;">
  <span>This text should touch the top of the red line</span>
</div>

我认为将0px添加到页边距和填充会做些什么，但是什么都没有改变。

Answer 1

文本未触及div边框的原因是跨度内的字符以line-height属性的形式具有自己的“填充”。

如果在跨度上添加边框，则会看到两个边框确实重叠...

<div style="border: 1px solid red; height: 50px; width: 100%; ">
  <span style="border: 1px solid blue;">This text should touch the top of the red line</span>
</div>

要消除跨度中的字符与div边框之间的间隙，您需要调整div的行高...

<div style="border: 1px solid red; height: 50px; width: 100%; line-height: 0.8em; ">
  <span>This text should touch the top of the red line</span>
</div>

另一种解决方案是使用跨度的绝对定位。虽然我不确定为什么您会讨厌这种技术。

Answer 2

position: absolute;不是一个“被黑客入侵”的解决方案。相对于最接近的相对定位的元素设置绝对定位。因此，如果您的div是相对放置的，并且您的跨度是绝对放置的，那么您的跨度将始终相对于您的div定位。

或者，如果您不喜欢文本上方自然出现的小空间并且希望将其冲洗得很干净，只需在跨度上设置line-height。

如何将文本移到其父div的顶部边缘

2 个答案: