JSFiddle Demo

Question

我正在做一个网站，但我的标题出了问题。我想要一个像stackoverflows听众一样的标题，但我的标题在侧面和顶部都有空格。这是我的css：

@charset "utf-8";
/* CSS Document */
.logo {
    vertical-align: top;
    position: relative;
    height: auto;
    width: auto;
}
#header {
    background-color: #E7E7E7;
    margin: auto;
    width: 100%;
    heigth: 100;

}

这是我的HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kifhood.se</title>
<link href="Untitled-3.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/advent-pro:n1,n3:default.js" type="text/javascript"></script>

</head>

<body>
<div id="header">
          <div class="wrap">
               <div class="logo">
                    <p style="font-family: advent-pro; font-style: normal; font-weight: 300; font-size: 36px; color: #FFFFFF; min-width: 0px;">Testing site</p>
               </div>             
          </div>
     </div>
</body>
</html>

这是我的结果 http://gyazo.com/4b0329b097fe51db377258f99d0fe2c9

Answer 1

body
{
   margin:0px;
   padding:0px;
}

这将解决内容周围的白色问题。

重要

正如Cubicle Dragon所指出的那样，该段落将有一个突破标题。这会产生额外的空白区域。将其替换为另一个元素（例如，文本的“span”或块内容的“div”）。

Answer 2

尝试：

#header {
background-color: #E7E7E7;
margin: 0;
width: 100%;
heigth: 100;

}

Answer 3

body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Answer 4

2件事：

使用<div>代替<p>作为“测试网站”内容。 <p>有一些内置的垂直边距。
在<body>上添加样式以删除浏览器可能添加的默认边距

这是一个有效的jsfiddle http://jsfiddle.net/t5XwZ/

Answer 5

将您的CSS更改为：

#header p {
    margin: 0;
    padding: 0;
}

body
{
   margin:0px;
   padding:0px;
}

JSFiddle Demo

Answer 6

您很可能遇到各种浏览器应用的默认样式差异的问题。您可以按照上面的建议将margin：0和padding：0添加到html元素，但是会遇到其他不一致的问题。我强烈考虑使用css reset或normalize来解决大多数这些不一致问题。

我使用的是eric meyer的第2版，但有很多可供选择：http://www.cssreset.com/

网站全宽标题

6 个答案:

JSFiddle Demo