CSS 溢出：滚动导致文本顶部出现额外的换行符

Question

I'm trying to create a div section with an image and text inside it, with scrolling overflow, but when I add the overflow:scroll, an extra line break is added at the top of the text, and I can't figure out how to get rid of it.

I know it isn't the padding or margin that's the problem, because the image is still positioned at the top. The text just has extra space. And removing just the overflow:scroll line gets rid of it, so I can't figure out why it's happening.

<div class="scroll">
<image class="avatar" src="(link here)"><p>text here</p>
</div>

.scroll {
height: 160px;
overflow: scroll;
}

img.avatar {
height: 50px;
width: 50px;
padding: 0px 6px 1px 0px;
float: left;
}

Any ideas?

Answer 1

It is indeed the margin of the p tag which is the problem here.

You may reproduce the behaviour you mentioned on other ways, eg, using a border around the .scroll container. The margin of the p tag is measured against the next element (in a minimal example, to the top of the page). If you set up a border or scrollbars, the margin is instead measured against the container itself, so it moves down.

To prohibit that behaviour, you could, for example, set a margin of 0 to the p tag.