Question

我正在为我的妹妹设计一个圣诞节的网站，在建设主页时，（vhawley.com），我一直看到这个恼人的边框沿着左边和顶部弹出。它非常薄，但它让我疯了！我一直在寻找和回答，但仍然没有找到任何东西。我已将网站设置为保证金：0自动，但除了愚蠢的行之外，它只是居中它。

这是我的HTML：

<!DOCTYPE HTML>
<html>

<title>Victoria Hawley</title>
<head>

<link rel="stylesheet" media="all and (min-width: 1378px)" href="grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="grid-400.css">

<link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>

</head>
<div id="openImage">
</div>

<div id="nameStrip">
Victoria Hawley
</div>

<div id="largeContainer">
<div id="bigBar">

<div id="middleBar">
<!--Put things for the middle body column here--!>
<h1>About me</h1>

</div>

<div id="leftBar">
<!--Put things for the left body column here--!>
<div id="theatericon">
<img src="images/theatericon.png">
</div>
</div>

</div>

<div id="rightBar">
<!--Put things for the right body column here--!>
</div>

</div>

</html>

这是我的CSS：

html{
width:978px;
margin:0 auto;
background:#F0F0F0;
}

#openImage{
float:top;
background-image:url('images/vic-978.jpg');
height:500px;
width:978px;
text-align:center;
}

#nameStrip{
margin:0 auto;
width:978px;
height:130px;
text-align:center;
border-bottom:5px solid #D7D293;
z-index:100;
font-size:100px;
color:#6B00FF;
font-family:cursive,sans;
}

#largeContainer{
height:relative;
min-height:500px;
width:978px;
z-index:1;
position:relative;
}

#leftBar{
float:left;
border-right:5px solid #D7D293;
width:195.6px;
min-height:500px;
z-index:3;
position:relative;
text-align:center;
}

#theatericon{
padding-top:20px;
}

#bigBar{
float:left;
width:778.4px;
position:relative;
}

#middleBar{
float:right;
text-align:center;
min-height:500px;
width:578.8px;
z-index:3;

}

#rightBar{
float:right;
border-left:5px solid #D7D293;
width:195.6px;
min-height:500px;
z-index:3;

}

#404head{
font-size:100;
}

Answer 1

默认情况下，body元素具有浏览器应用的边距。

要删除它，请添加

body {
  margin: 0;
}

到你的样式表。

Answer 2

body {
  margin: 0;
}

使用firebug进行html和css调试。

沿着站点的左侧和顶部出现奇怪的不需要的栏

2 个答案: