重置樣式表，仍然有空白區域

我已經重置了樣式表，但我仍然在頂部有一個白色條。我已經檢查了我的代碼，以確保我已將邊距和填充設置爲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

因爲line-height屬性

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

我會從身體中取出的

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; 
}

來源

2014-03-27 AFanCorp

It's：

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

看看這個reset。另外normalize.css很酷。
對於印刷違約看看Typeplate
如果在Bootstrap框架與HTML和CSS還採取一看有點的expirience :-)
快樂編碼

來源

2014-03-27 11:50:49 chris

感謝一大堆！沒想到行高：0;爲包裝。 – AFanCorp

重置樣式表，仍然有空白區域

回答

相關問題