为什么我的 HTML 元素之间有空格？
我正在尝试为我妈妈的背包客业务设计一个网站。我遇到的问题是在我的横幅图像和导航栏之间有一条空白的白线，您可以在图像中看到。我认为这与边距有关，因此我将这两个元素都设置为零，但无济于事。
还有第二个问题 - 为什么我的黑色边框没有覆盖主要内容？我认为既然它是一个身体背景，它就会围绕身体的每个元素。
我意识到可能有类似的问题，但我无法在任何地方找到答案。我将感谢任何人的意见 - 这是我在这里发表的第一篇文章，所以如果我搞砸了任何格式，我很抱歉。
我的网站的图片可以在这里找到：
http://postimage.org/image/20dhjcdb8/
提前致谢。
目前，我的index.html 文件中有以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links"><a href="index.html">Home</a></li>
<li class="links"><a href="planning.html">Planning</a></li>
<li class="links"><a href="construction.html">Construction</a></li>
<li class="links"><a href="evaluation.html">Evaluation</a></li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
</body>
</html>
以及以下CSS 代码：
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
width: 960px;
float: right;
background-color: white;
margin: 0;
}
.links {
float: left;
margin: 0px;
}
a:link, a:visited {
display: block;
width: 232px;
font-weight: bold;
color: grey;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover, a:active{
background-color: #333333;
}
I'm trying to design a website for my mums backpackers business. The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.
Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.
I realise there may have been similar questions but I can't find the answer anywhere. I will appreciate anyones input - this is my first post here so I'm sorry if I screwed up any formatting.
The image of my website can be found here:
http://postimage.org/image/20dhjcdb8/
Thanks in advance.
I currently have the following code in my index.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links"><a href="index.html">Home</a></li>
<li class="links"><a href="planning.html">Planning</a></li>
<li class="links"><a href="construction.html">Construction</a></li>
<li class="links"><a href="evaluation.html">Evaluation</a></li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
</body>
</html>
and the following CSS code:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
width: 960px;
float: right;
background-color: white;
margin: 0;
}
.links {
float: left;
margin: 0px;
}
a:link, a:visited {
display: block;
width: 232px;
font-weight: bold;
color: grey;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover, a:active{
background-color: #333333;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在 HTML 中，图像默认是内联级别元素，因此它们遵循文本规则（并且下面会有空格以保持与“p”等字母的正确对齐）。您可以将
display: block分配给标题图像，或将标题容器定义为与图像具有相同的精确高度因为浮动元素会从容器中弹出，所以您必须清除浮动以使用类似的东西扩展容器
，或者使用一些重置/清除修复CSS，例如 html5样板。
In HTML images are by default inline level elements so they follow text rules (and will have blank space below to keep the correct alignment with letters like "p" and such). You can either assign
display: blockto the header image, or define the header container to have the same exact height as the imageBecause floated elements pop out of their container, you have to clear the float to extend the container with something like
or use some reset/clearfix css such as the one provided by html5boilerplate.
添加到你的CSS
add to your css
如果删除
#mainc的float属性，则边框将包围所有内容。通过使用浮动，您可以将div从主页面流中取出。If you remove the
floatproperty of#maincthen the border will surround all the content. By using float, you are taking thedivout of the main page flow.