我正在嘗試創建一個帶有影像和文本的 div 部分，并帶有滾動溢位，但是當我添加溢位：滾動時，文本頂部添加了一個額外的換行符，我無法弄清楚如何擺脫它。
我知道問題不是填充或邊距，因為影像仍然位于頂部。文本只是有額外的空間。僅洗掉溢位：滾動行即可擺脫它，所以我無法弄清楚為什么會發生這種情況。
<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;
}
有任何想法嗎？
uj5u.com熱心網友回復：
確實是p標簽的邊距是這里的問題。
您可以通過其他方式重現您提到的行為，例如，border在.scroll容器周圍使用 a 。p標記的邊距是針對下一個元素（在一個最小的示例中，到頁面頂部）進行測量的。如果您設定邊框或滾動條，則邊距是根據容器本身測量的，因此它會向下移動。
例如，要禁止這種行為，您可以將p標簽的邊距設定為 0 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322092.html
上一篇：CSS發光圓圈效果
下一篇：離開懸停后反轉CSS影片不起作用