如果我們有這樣的元素：
<main style="padding: 16px; width: 400px; border: 2px dashed gray;">
<div style="background-color: gray;">header</div>
<section>content</section>
</main>有沒有辦法div使用僅應用于 div 元素的 CSS 讓元素一直延伸到父元素的邊緣超出填充？
有人提到對 , 使用負邊距值div，這可能有效。
我希望有一種方法可以在不直接使用值的情況下做到這一點，以防應用于父容器的 CSS 填充發生變化。
uj5u.com熱心網友回復：
如果您知道對父級應用了多少填充，則可以對子級應用負邊距。然后（可選）重新對子應用填充，以便您的內容保持在原始父級的范圍內。
.wrapper {
padding: 16px;
border: 2px dashed gray;
}
.header {
background-color: gray;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}<main class="wrapper" style="width: 400px;">
<div class="header">header</div>
<section>content</section>
</main>uj5u.com熱心網友回復：
如果您只想擴展背景，這是一個使用的想法，border-image但您還需要添加overflow:hidden到父級
<main style="padding: 16px; width: 400px; border: 2px dashed gray;overflow:hidden">
<div style="border-image:conic-gradient(gray 0 0) fill 0//100vw 100vw 0 100vw;">header</div>
<section>content</section>
</main>uj5u.com熱心網友回復：
可以解決position: absolute
<main style="padding: 16px; width: 400px; border: 2px dashed gray; position: relative">
<div style="background-color: gray; position: absolute; left: 0; top: 0; right: 0;">header</div>
<section>content</section>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492197.html
上一篇：從Wordpress中的<ul><li>元素創建下拉選單
下一篇：獲取子節點