保證金合併未按預期合併

我試圖爲網站構建佈局，這裏是我的CSS和HTML。保證金合併未按預期合併

問題：

1.採用頭部和導航條格，我不使用保證金合併，但仍然覺得它有合併 2.具有導航和左側導航/ div的內容合併沒有發生

有人可以解釋發生了什麼？

HTML

<div id="container"> 
    <div id="header"> 
    </div> 
    <div id="navigation"> 
    </div> 
    <div id="left-nav"> 
    </div> 
    <div id="content"> 
    </div> 
</div>

CSS

html, body { 
     height: 100%; 
     width: 100%; 

     } 

    #container { 
     height: 100%; 
     width: 100%; 


    } 
    #header { 
     height: 15%; 
     width: 100%; 
     background-color:grey; 
     margin:1%; 

    } 

    #navigation { 
     height: 5%; 
     width: 100%; 
     background-color:grey; 
     margin:1%; 
    } 

    #left-nav { 
     height: 40%; 
     width: 20%; 
     background-color:grey; 
     margin:1%; 
     float:left; 
    } 

    #content { 
     height: 40%; 
     width: 70%; 
     background-color:grey; 
     margin:1%; 
    float:left; 
    }

jsfiddle

來源

2014-06-09 user1050619

你能解釋一下「邊距合併」的含義嗎？ – Samsquanch

兩個分部的標題和導航都有1％的利潤率。因此，當我嘗試將它們放在一起時，我將獲得2％的保證金...但我需要在它們之間有1％的保證金 – user1050619

，然後分別給出0.5。。 –

實際上所有你需要做的是使用一個全局CSS復位或

*{margin:0; padding:0;}

這將刪除阿爾斯o瀏覽器添加到body的默認邊距。

不僅僅是走在你的CSS和刪除您DIV元素width: 100%;原因，他們已經默認設置爲auto（是塊級元素）。

現在你已經這樣做了，對於所有其他元素，你需要的是一些簡單的數學...

100% - (1%(or 0.5%?) margin * 2sides * No of elements) etc :)

http://jsfiddle.net/7L98c/2/

來源

2014-06-09 20:23:30

合併不導航和左之間發生導航/內容是你浮動left-nav和內容。當一個元素是「浮動」時，它周圍的餘量不會與其他人合併。

來源

2014-11-05 01:46:30 Mipaprika

保證金合併未按預期合併

回答

相關問題