为什么我的元素之间有空格?

时间:2018-12-19 05:17:37

标签: html css

这是在我将代码和所有div整理到单独的行之后发生的。

enter image description here

当代码如下所示时,会发生以下情况:

<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>

1 个答案:

答案 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>