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?
CodePudding user response:
It is indeed the margin of the p
tag which is the problem here.
You may reproduce the behaviour you mentioned on other ways, e.g., 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.