什么是占用网页空间？

我有五个链接，彼此相邻，虽然它们设置为20％的宽度，但最后一个链接到下一行。但是，当我将其设置为19.5％时，没关系。我确定我为body，链接和所有包含的元素设置了填充和边距为0.尽管这不是一个主要问题，但有关这方面的任何信息都将不胜感激。什么是占用网页空间？

下面是HTML：

<div id="top"> 
    <img src="someimage" /> 
    <nav id="nav"> 
     <a href="link1.html">LINK1</a> 
     <a href="link2.html">LINK2</a> 
     <a href="link3.html">LINK3</a> 
     <a href="link4.html">LINK4</a> 
     <a href="link5.html">LINK5</a> 
    </nav> 
</div>

而CSS：

body { 
    background-color: white; 
    margin: 0; 
    padding: 0; 
} 
#top { 
    background-color: #AAAAAA; 
    height: 50px; 
} 
#nav > a { 
    display:inline-block; 
    height: 25px; 
    width: 19.5%; 
    background-color: #AAAAAA; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    text-decoration: none; 
    color: #222222; 
}

感谢您的答案。我在标签之间添加评论，并且工作正常。

来源

2013-08-07 Lambda Ninja

它会自行排除，如果你把img显示：块;？ – allen213

[如何删除内嵌块元素之间的空间？]的可能重复（http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements） – Pascal

每条链接之间的换行符转换为空格。这是正在添加的宽度。

你可以写在一行中的所有<a>标签，让它们漂浮或它们之间添加注释，像这样：

<nav id="nav"> 
    <a href="link1.html">LINK1</a><!-- 
    --><a href="link2.html">LINK2</a><!-- 
    --><a href="link3.html">LINK3</a><!-- 
    --><a href="link4.html">LINK4</a><!-- 
    --><a href="link5.html">LINK5</a> 
</nav>

来源

2013-08-07 13:10:31 Pascal

他所说的小提琴。 http://jsfiddle.net/KaKRA/1/。两者都很好地工作。 – defaultNINJA

这是标签之间的空白区域。 Check out this article你可以做的事情来对付它。

我的建议是简单地把HTML全部放在一行上。阅读起来很难，但呈现你想要的东西。

但是，最好的方法是建立一个构建步骤，将HTML缩小并自动清除所有内容。

来源

2013-08-07 13:09:12 freejosh

啊，你打败了我！我会为我的辉煌的''建议留下我的回答。 ;） – Pascal

他说的小提琴。 http://jsfiddle.net/KaKRA/ – defaultNINJA

这工作正常。 +1 –

inline-block有翻译的问题行闯入空间，这可能会破坏你的布局，我建议你使用花车，而不是：

#nav{ 
    overflow:hidden; 
} 

#nav > a { 
    float: left; 
    height: 25px; 
    width: 19.5%; 
    background-color: #AAAAAA; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    text-decoration: none; 
    color: #222222; 
}

来源

2013-08-07 13:15:51 Tomer

最喜欢这个答案最好。纯CSS修复，没有HTML标记操作。因为我讨厌'inline-block'，所以我会选择这个。 http://jsfiddle.net/KaKRA/3/ – defaultNINJA

什么是占用网页空间？

回答

相关问题