Question

我重置了样式表，但顶部仍然有一个白色条。我已经检查了我的代码，以确保我的边距和填充设置为0并且已经重置。

JSFiddle（http://jsfiddle.net/yX6fR/）显示代码没有错，但上传到托管时... http://krontech.ca/

我已经尝试将这个问题解决了5个小时，我觉得很蠢。

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="UTF-8">
</head>
<body>
    <div id="wrapper">
        <div id="sidebar-wrapper">
        <i class="placeholder-sidebarimage"></i>
        <ul>
            <li><a href="./index.php">link</a></li>
            <li><a href="./index.php">link</a></li>
            <li><a href="./index.php">link</a></li>
        </ul>
        </div>
        <div id="content-wrapper">
            <img src="./images/fill.png">
            <p>test</p>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

CSS

body
{
line-height: 1;
margin: 0px;
background: #f3f3f3;
}

ul
{
list-style: none;
list-style-image: none;
}

/* Clear Fix */
/* For modern browsers */
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
    clear: both;
}

/* WEBSITE INFO STARTS HERE */
#wrapper
{
margin: 0px auto;
}

/* SIDEBAR */
#sidebar-wrapper
{
float: left;
position: fixed;
background: gray;
}

.placeholder-sidebarimage
{
display: block;
width: 150px;
height: 150px;
margin: 0;
background: #3796bc;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: medium;
border-color: #d1d3d4;
}

/* CONTENT */
#content-wrapper
{
width: 1024px;
margin: 0 auto;
}

/* FOOTER */
#footer
{
position: relative;
}

Answer 1

这是因为行高属性

#wrapper {
    margin: 0px auto;
    line-height: 0; /* <-- */
}

我会把它从身体上移除：

body {
     line-height: 1; /* <-- remove this */
     margin: 0px;
     background: #f3f3f3;
}

看看这个reset。 normalize.css也很酷对于排版默认值，请查看Typeplate
如果您对html和css有点了解，请查看Bootstrap框架:-)
快乐的编码

重置样式表，仍有空白区域

1 个答案: