为什么我会在我的HTML元素之间获得空白区域？ [英] Why am I getting white space between my HTML element?
问题描述
我试图为我的妈妈背包客业务设计一个网站。我遇到的问题是在我的横幅图像和我的导航栏之间有一个空白的白线，您可以在图像中看到。我认为这与边缘有关，所以我已经将它设置为零，这两个元素都无济于事。
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/
预先感谢。
我目前在我的index.html文件中有以下代码：
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>
和以下CSS代码：
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;
}
推荐答案
我遇到的问题是在我的横幅图像和我的导航栏之间有一个空白的白线，您可以在图像中看到。我认为这是与保证金有关，所以我已将它设置为零，因为这两个元素都无济于事。
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.
在HTML图像是默认的内联级元素，所以它们遵循文本规则（并且将在下面留出空白以保持与诸如p等字母的正确对齐）。您可以将 display：block 分配给标题图像，或者将标题容器定义为与图像具有相同的高度。
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: block to the header image, or define the header container to have the same exact height as the image
第二个问题 - 为什么我的黑色边框不能覆盖主要内容？
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.
由于浮动元素会从其容器中弹出，因此您必须清除float以扩展容器，如
Because floated elements pop out of their container, you have to clear the float to extend the container with something like
<div style="clear: both"></div>
或者使用一些reset / clearfix css，例如 html5boilerplate 。
or use some reset/clearfix css such as the one provided by html5boilerplate.
这篇关于为什么我会在我的HTML元素之间获得空白区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
