這是一個示例:
div {
height: 0;
overflow: hidden;
padding: 12px;
background: tan;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
有沒有辦法防止填充增加的大小div?一些執行緒建議使用box-sizing: border-box,但在這種情況下它似乎不起作用。
uj5u.com熱心網友回復:
通過添加額外的 div 將其替換為邊距
div.box {
height: 0;
overflow: hidden;
background: tan;
}
div.box div {
margin: 12px;
}
<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
或者考慮使用偽元素進行一些黑客攻擊:
div.box {
height: 0;
overflow: hidden;
background: tan;
padding: 0 15px; /* horizontal padding */
}
div.box:before,
div.box:after {
content: "";
display: block;
height: 12px; /* vertical padding */
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
uj5u.com熱心網友回復:
如果您需要額外的空間,您可以使用 {margin} 代替,它只會在“”框之外添加空間。此外,如果您想要文本之間的間距,您可以使用 css 屬性 {line-height}。
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/398097.html
上一篇:段落沒有以影像為中心
下一篇:具有最大高度的父級中的垂直div
