爲什麼子元素不會相對於父元素使用保證金

我在<div>元素中爲子元素<p>提供了保證金，但它正在移動div元素本身。我想把這個段落降低到任意值。我知道我們可以爲父元素提供填充，但是它呢？爲什麼子元素不會相對於父元素使用保證金

在這裏，以此示例代碼...嘗試更改.square p保證金屬性。

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} .square p { 
 
    margin: 50px auto; 
 
}

<div class="square"><p>Hi</p></div>

它不應該是相對父元素？

來源

2016-09-01 Abhishek Pathak

這裏的問題是親子margin collapsing。要解決這個問題的方法之一是使用overflow: hidden

* { 
 
    margin: 20px auto; 
 
    box-sizing: border-box; 
 
} 
 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
    overflow: hidden; 
 
} 
 
.square p { 
 
    margin: 50px auto; 
 
}

<div class="square"> 
 
    <p>Hi</p> 
 
</div>

來源

2016-09-01 10:23:33

p是block元素，這是正常現象爲母體square過。

嘗試inline-block顯示p標記，您可以調整相對父項的邊距。如果您想保留p作爲block，您應該爲父母提供overflow: hidden。

示例使用inline-block：

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} .square p { 
 
    margin: 50px auto; 
 
    display: inline-block; 
 
}

<div class="square"><p>Hi</p></div>

來源

2016-09-01 10:24:08 kukkuz

是的，這工作。但爲什麼我們需要修復，這是W3C必須考慮的事情。無論如何，邊緣摺疊有什麼好處？ –

我不是專家。 @NenadVracar應該知道它。 :) – kukkuz

你應該給display:inline-block;財產兒童p。

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} 
 
.square p { 
 
    margin: 50px auto; 
 
    display: inline-block; 
 
}

<div class="square"><p>Hi</p></div>

來源

2016-09-01 10:27:06 Trix

爲什麼子元素不會相對於父元素使用保證金

回答

相關問題