如何正確對齊此html佈局？

嗨iam試圖刪除這些空白（圖像中的綠色圓圈），但我不是最好的方式來做到這一點。即使我可以做margin-left -ve值和寬度超過100％，但有什麼方法可以正確解決這個問題。如何正確對齊此html佈局？

這裏是我的html代碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Hachi</title> 

<link rel="stylesheet" href="css/style_rec.css" type="text/css" /> 

</head> 

<body> 
<style> 
#container{ 
font-family: "proxima-nova", Helvetica, Arial, sans-serif; 
     font-weight: normal; 
     color:#414141; 
     -webkit-font-smoothing: antialiased; 
     height: auto; 
     width: 100%; 

} 
#header{ 
    width: 100%; 
    height:100px; 
    background-color: red; 
} 
#left_panel{ 
    width: 50%; 
    float: left; 
/* height: 400px; 
*/ background-color: green; 
} 
#right_panel{ 
    width: 50%; 
    float: left; 
/* height: 400px; 
*/ background-color: blue; 
} 
#bottom_logos{ 
    width: 100%; 
    height:100px; 
    background-color: yellow; 
} 
</style> 
<div id="container"> 
<div id="header"></div> 
<div id="left_panel"> 
kjjjhjfhklhhhkh 
dfdsfdsfsdfdsf 
</div> 
<div id="right_panel"> 
ewrewrewrewrewr 
ewrwerewrwerewr 
</div> 
<div id="bottom_logos"></div> 
</div> 

</body> 
</html>

截圖 enter image description here

來源

2014-06-18 Bangalore

這些邊距是瀏覽器默認呈現內容方式的一部分。

您可以使用body, html { margin: 0px; }將其刪除。

我也推薦你使用CSS reset。

來源

2014-06-18 08:32:04 Filly

寫含有填充體的CSS樣式：0;和餘量：0;

來源

2014-06-18 08:31:20 rhbvkleef

Demo

body { 
    margin:0; 
    padding: 0; 
}

編輯：

這裏沒有必要添加html { margin:0; padding:0; }，因爲他們沒有任何默認瀏覽器的風格。從Does the <html> element have a default margin or padding in any browser, since normalize.css doesn't reset it?

來源

2014-06-18 08:32:24 4dgaurav

HTML是不必要 –

@ChristophBühler：是啊，U R右。 http://stackoverflow.com/questions/19101486/does-the-html-element-have-a-default-margin-or-padding-in-any-browser-since-n – 4dgaurav

試試這個：

您需要聲明margin: 0您body和html兩者。

http://jsfiddle.net/appleBud/MweUe/

希望工程。

來源

2014-06-18 08:35:04 AppleBud

大家是正確的..感謝很多人..upvote !! – Bangalore

嘗試重置CSS，如：

html,body{margin:0; padding:0;}

，或者你可以找到完全復位here

來源

2014-06-18 08:35:07

每個人都是正確的..感謝很多人..upvote！ – Bangalore

如何正確對齊此html佈局？

回答

相關問題