我无法弄清楚如何从导航栏和图片中移除此空间..
我对导航栏和图像的CSS代码是:
keyword
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
是图片ID。
html就是这样:
#bikebanner
寻找普遍适合,因为我还有其他东西,它们之间也有空白区域。
感谢。
答案 0 :(得分:4)
尝试将此添加到您的css:
img{
display:block;
}
img是inline-block类型,它增加了一些很难找到的空间。
将其设置为阻止应该修复它。
答案 1 :(得分:2)
请记住,默认情况下,h1周围有空格
答案 2 :(得分:1)
这最初导致很多人疯狂并且解决方案并不明显,但由于img
或ul
上继承或设置的字体大小,图像,列表和列表项最终会出现这样的小空间。 img
。如果您不执行任何操作,则ul
和clearfix
会继承正文字体大小(通常为14px - 16px),并导致此0.25rem(或3.5px - 4px)空间问题。
有两种流行的解决方案:
ul
或其容器添加ul
,或li
上的字体大小设置为0,然后将ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
上的字体大小设置为1rem(或其他)。所以我的CSS看起来像这样:
display: block
如果将图像设置为display: block;
,则会占用图像下方的空间。这也有它自己的警告。例如,如果您在将其切换为auto
后将其置于中心位置,则需要将边距设置为header img {
display: block;
margin: 0 auto;
}
。像这样:
test.txt
答案 3 :(得分:1)
默认情况下,每个h1-h6标签的上下都有一个边距。我想如果你在你的CSS中覆盖这个你有你想要的东西。
h1 {
margin: 0;
padding: 0;
}
看看这个jsfiddle https://jsfiddle.net/zn7wtdLp/
答案 4 :(得分:0)
问题是display:inline
。这会像文本一样处理元素,所以如果你有
<li>...</li>
<li>...</li>
您遇到了问题,因为换行符会占用空间。 尝试将列表元素放在这样:
<li>...</li><li>...</li>
有关其他解决方案,请参阅here