CSS overflow:scroll 导致文本顶部出现额外的换行符

Question

我正在尝试创建一个 div 部分，其中包含图像和文本，滚动溢出，但是当我添加 overflow: scroll 时，会在顶部添加一个额外的换行符文本，我不知道如何摆脱它。

我知道问题不是填充或边距，因为图像仍然位于顶部。文本只是有额外的 space。只删除 overflow: scroll 行就可以摆脱它，所以我不明白为什么会这样。

<!doctype html>
<html>
    <head>
        <style>
.scroll {
    height: 160px;
    overflow: scroll;
}

img.avatar {
    height: 50px;
    width: 50px;
    padding: 0px 6px 1px 0px;
    float: left;
}
        </style>
    </head>
    <body>
        <div class="scroll">
            <img class="avatar" src="(link here)"><p>text here</p>
        </div>
    </body>
</html>

有什么想法吗？

Answer 1

问题确实出在 p 标签的边距上。

您可以通过其他方式重现您提到的行为，例如，在 .scroll 容器周围使用 border。 p 标签的边距是根据下一个元素（在最小示例中，到页面顶部）测量的。如果您设置了边框或滚动条，则边距会根据容器本身进行测量，因此它会向下移动。

要禁止该行为，例如，您可以将 p 标记的边距设置为 0。

CSS overflow:scroll 导致文本顶部出现额外的换行符

CSS overflow:scroll causing an extra line break at the top of the text

html

css

overflow