HTML子項寬於父容器

有一個外部div和一個內部div元素。有時我看到內部div比外部div寬。HTML子項寬於父容器

這是什麼時候發生的？以及如何解決這個問題？

<div id="outer"> 
    <div id="inner"></div> 
</div>

來源

2014-10-04 arjit nair

這可以有很多很多的原因裏面的margin，padding和邊框......請縮小您的問題下。 – 2014-10-04 09:27:54

我不記得確切的CSS是什麼。但肯定沒有任何元素的溢出屬性。但有填充，導致問題的邊緣...！ – 2014-10-04 09:29:30

使用'box-sizing：border-box'，它會從內部填充，或者它將是'width' +'padding' 100％width + xxpx padding – 2014-10-04 09:41:06

-2

<div id="outer"> 
    <div id="inner">Inner Text</div> 
</div> 
<style type="text/css"> 
    #inner, #outer { 
    box-sizing: border-box; 
    width: 100%; 
    border: solid 1px #000; 
    padding: 1%; 
    } 
</style>

來源

2014-10-04 09:32:05

根據comment內部元件的寬度大於母由余量/填充引起的原因。這發生在你設置

(width + padding + margin + border) of child > parent width

example

解決方法：

保證金：你需要計算(width + margin) of child =< parent widthdemo
對於border和padding ：可以使用box-sizing屬性包含在元素的寬度，填充和邊界（或使用相同的技術作爲保證金）
邊境，margin和padding：當你不需要設置內部元件上的寬度，刪除和塊級元素的默認行爲將包括父demo

來源

2014-10-04 09:37:56

HTML子項寬於父容器

回答

相關問題