无法解释的空白? [英] Unexplainable whitespace?
问题描述
我只是在编写一些简单的代码，但结果中似乎有一个无法解释的空格...而且我似乎不能失去它！
要清楚:我的意思是紫色标题和白色导航属性之间的线".
我尝试去掉代码中的制表符和空格，但没有帮助.
这是一个简单的小提琴:http://jsfiddle.net/LNhK5/
HTML:
<div id="包装器"><标题><img class="logo" src="images/logo.png"></标题><nav id="mainMenu"><ul><li>Nieuwsoverzicht</li><li>趋势</li><li>Lokaal nieuws</li></nav>CSS:
body{背景颜色:#ebebeb;保证金:0;填充:0;}#包装器{宽度:100%；填充:0;保证金:0;}标题{背景色:#835497;高度:70px；宽度:100%；保证金:0;填充:0;}.标识{高度:80%；显示:块；边距:0 自动 0 自动；}导航{背景色:#ffffff;高度:45px；宽度:100%；保证金:0;填充:0;}导航#mainMenu ul li{字体系列:'source_sans_proregular';字体大小:1.2em；颜色:#c2c2c2；显示:内联块；文字对齐:居中；保证金:0;填充:0;}是我忽略了什么，还是我只是打错了字?
也许你所说的空格是由 ul 引起的?
尝试将边距设置为零:
ul {边距:0；}I'm just coding something simple, but there seems to be an unexplainable whitespace in my result... And I can't seem to lose it!
To be clear: I mean the 'line' between the purple header and the white nav-attribute.
I tried getting rid of the tabs and spaces in my code, but it did not help.
Here's a simple fiddle: http://jsfiddle.net/LNhK5/
HTML:
<body>
<div id="wrapper">
<header>
<img class="logo" src="images/logo.png">
</header>
<nav id="mainMenu">
<ul>
<li>Nieuwsoverzicht</li>
<li>Trending</li>
<li>Lokaal nieuws</li>
</ul>
</nav>
</div>
</body>
CSS:
body{
background-color:#ebebeb;
margin:0;
padding:0;
}
#wrapper{
width:100%;
padding:0;
margin:0;
}
header{
background-color:#835497;
height:70px;
width:100%;
margin:0;
padding:0;
}
.logo{
height:80%;
display:block;
margin: 0 auto 0 auto;
}
nav{
background-color:#ffffff;
height:45px;
width:100%;
margin:0;
padding:0;
}
nav#mainMenu ul li{
font-family:'source_sans_proregular';
font-size:1.2em;
color:#c2c2c2;
display:inline-block;
text-align:center;
margin:0;
padding:0;
}
Is it something I'm overlooking, or did I just make a typo-error?
Perhaps the whitespace you are talking about is due to the ul ?
Try setting the margin to zero:
ul {
margin: 0;
}
这篇关于无法解释的空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
