刪除div標籤之間的不可見邊距

由於某些原因，我無法弄清楚它爲什麼會這樣做，但是我的div標籤在每個div標籤之間有一個很小的明顯的空白，使得div標籤不是彼此相互對齊。任何人有一個想法，我哪裏會出錯？刪除div標籤之間的不可見邊距

謝謝。

body { 
 
    background-color: #E8E8E8; 
 
} 
 
#content { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 
#header { 
 
    background-color: #4C66A4; 
 
} 
 
#mainBody { 
 
    background-color: #FFF; 
 
} 
 
#footer { 
 
    background-color: #4C66A4; 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="header"> 
 
     <p>header</p> 
 
    </div> 
 
    <div id="mainBody"> 
 
     <p>body</p> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-02-07 G.Hamton

這是P元素的默認邊距。去研究_collapsing margins_。 – CBroe

由於瀏覽器在每次<p>元素之後，你需要將<p>保證金設定爲自動添加一定的餘量0（零）像這樣：

body { 
 
    background-color: #E8E8E8; 
 
} 
 
#content { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 
#header { 
 
    background-color: #4C66A4; 
 
} 
 
#mainBody { 
 
    background-color: #FFF; 
 
} 
 
#footer { 
 
    background-color: #4C66A4; 
 
} 
 

 
#mainBody > p, #header > p, #footer > p { 
 
    margin: 0; /*set all <p> elements inside the div id of #mainBody, #header and #footer into margin: 0*/ 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="header"> 
 
     <p>header</p> 
 
    </div> 
 
    <div id="mainBody"> 
 
     <p>body</p> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-02-07 14:44:26 prtdomingo

只需卸下p元素默認保證金。

p { 
    margin: 0; 
}

來源

2017-02-07 14:38:36 Aer0

附加p {保證金：0像素;}

body { 
 
    background-color: #E8E8E8; 
 
} 
 
#content { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 
#header { 
 
    background-color: #4C66A4; 
 
} 
 
#mainBody { 
 
    background-color: #FFF; 
 
} 
 
#footer { 
 
    background-color: #4C66A4; 
 
} 
 
p { 
 
margin: 0px; 
 
}

<body> 
 
    <div id="content"> 
 
    <div id="header"> 
 
     <p>header</p> 
 
    </div> 
 
    <div id="mainBody"> 
 
     <p>body</p> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-02-07 14:40:04 xfactor11

刪除div標籤之間的不可見邊距

回答

相關問題