Question

我试图了解如何获得全宽标题。问题是它在标题周围有一个薄的白色边框，并不是全宽。如果重要的话，我没有使用任何网格系统。

HTML

<!DOCTYPE html>
   <html>

     <head>
  <link rel="stylesheet" href="css/style.css" type="text/css" display="screen" > 

 <title>
    test app
 </title>

</head>

<body>
<div id="header"/>
</div>


</body>

</html>

CSS

#header {

    float:left;
    padding:15px 0;
    min-width:100%;
    background: #5FBEED;

}

任何帮助非常感谢。

Answer 1

我认为问题是围绕它获得白色边框。 div会自动填充整个窗口的宽度，因此请移除min-width样式： Example fiddle 。

CSS：

#header {
    padding: 15px 0;
    border: 10px solid white;
    background: #5FBEED;
}

Answer 2

将此添加到您的css

body{ margin: 0; padding: 0; }

浏览器将自己的css添加到html元素中，这在浏览器之间有所不同。边距和填充也适用于UL和其他一些元素...

您可以在此处详细了解此信息...... http://clagnut.com/blog/1287/

Answer 3

白色边框很可能是由BODY标记的固有margin添加的。尝试添加以下CSS：

body {
    margin: 0;
}

Answer 4

html, body{
padding: 0;
margin 0;

}

#header {
padding: 15px 0;
border: 10px solid #5FBEED;
background: #5FBEED;

}

在这种情况下，您的边框颜色与标题背景颜色相同

全宽标题和图像CSS

4 个答案: