这是在我将代码和所有div整理到单独的行之后发生的。
当代码如下所示时,会发生以下情况:
<div id="header">
<p id="buttons">
<div id="html" class="labels active">HTML</div>
<div id="css" class="labels">CSS</div>
<div id="js" class="labels">Javascript</div>
<div id="output" class="labels active">Output</div>
</p>
</div>
//但不是这样的:
<div id="header">
<p id="buttons">
<div id="html" class="labels active">HTML</div><div id="css" class="labels">CSS</div><div id="js" class="labels">Javascript</div><div id="output" class="labels active">Output</div>
</p>
</div>
答案 0 :(得分:4)
HTML会将所有非零数量的空格折叠为一个空格,除非white-space
CSS属性另有指示。
每个div之间有两条换行符,以及一排缩进空间。所有这些都是空格,导致元素之间呈现单个空格。
还要注意,HTML5语义不允许<div>
内的<p>
;您的#buttons
将立即自动关闭,并且实际上不包含<div>
元素(除非您未使用HTML5)。所以假设你有这个:
#header div {
display: inline-block;
border: 1px solid black;
}
<div id="header">
<div id="html" class="labels active">HTML</div>
<div id="css" class="labels">CSS</div>
<div id="js" class="labels">Javascript</div>
<div id="output" class="labels active">Output</div>
</div>
您可以通过多种不同的方式来避免空格,其中大多数都不直观。一种方法是使用自动关闭的语义对您有利。自动关闭仅发生在下一个标记之前,因此元素之间不能有空格。您无法使用<div>
来获得它,因为<div>
可以嵌套;所以...
#header {
padding: 0;
}
#header li {
display: inline-block;
border: 1px solid black;
}
<ul id="header">
<li id="html" class="labels active">HTML
<li id="css" class="labels">CSS
<li id="js" class="labels">Javascript
<li id="output" class="labels active">Output
</ul>
另一种解决方案是使用float
,它将元素放置在通常所属的位置之外,并保留讨厌的空间。
#header div {
float: left;
border: 1px solid black;
}
<div id="header">
<div id="html" class="labels active">HTML</div>
<div id="css" class="labels">CSS</div>
<div id="js" class="labels">Javascript</div>
<div id="output" class="labels active">Output</div>
</div>
一种现代的解决方案是使用flex
,它类似地不在乎空格,而只是在其照顾下正确地布局元素。
#header {
display: flex;
flex-direction: row;
}
#header div {
border: 1px solid black;
}
<div id="header">
<div id="html" class="labels active">HTML</div>
<div id="css" class="labels">CSS</div>
<div id="js" class="labels">Javascript</div>
<div id="output" class="labels active">Output</div>
</div>