Question

嗨，我试图删除这些空白区域（图像中的绿色圆圈），但我不是最好的方法。即使我可以将margin-left -ve值和宽度设置为100％以上，但是有没有办法以正确的方式解决这个问题。

这是我的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

Answer 1

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?

Answer 2

这些边距是浏览器默认呈现内容的一部分。

您可以使用body, html { margin: 0px; }删除它们。

我还建议您使用CSS reset。

Answer 3

尝试重置CSS，如：

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

或者您可以找到完全重置 here

Answer 4

为包含填充的body写一个CSS样式：0;和保证金：0;

Answer 5

试试这个：

您需要为margin: 0和body两者声明html。

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

希望它有效。

如何正确对齐这个html布局？

5 个答案: