Pourquoi y a-t-il des espaces entre mes éléments ?

Question

Cela s'est produit après que j'ai nettoyé mon code et tous les divs en lignes séparées.

L'image montre ce qui se passe lorsque le code est comme ceci :

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

//Mais pas quand c'est comme ça :

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

Answer 1

Le HTML réduit toute quantité non nulle d'espace blanc à un seul espace, à moins qu'il n'en soit décidé autrement par l'utilisateur. white-space Propriété CSS.

Il y a deux retours à la ligne entre chaque div, ainsi qu'un grand nombre d'espaces d'indentation. Tous ces éléments sont des espaces blancs, et le résultat est qu'un seul espace est rendu entre vos éléments.

Notez également que la sémantique HTML5 ne permet pas de <div> à l'intérieur d'un <p> ; votre #buttons est autoclosé immédiatement, et ne contient pas réellement <div> (sauf si vous n'utilisez pas HTML5). Donc en supposant que vous avez ceci :

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

Vous pouvez éviter les espaces de plusieurs manières différentes, la plupart d'entre elles n'étant pas intuitives. L'une d'elles consiste à utiliser la sémantique de l'autoclose à votre avantage. L'autoclose se produit juste avant la balise suivante, de sorte qu'aucun espace ne peut se trouver entre les éléments. Vous ne pouvez pas l'obtenir avec <div> puisque <div> peut faire son nid ; donc...

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

Une autre solution serait d'utiliser float qui positionnera les éléments en dehors de l'endroit auquel ils appartiennent normalement, et laissera les vilains spacieux derrière.

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

Une solution moderne consisterait à utiliser flex qui, de même, ne se soucie pas des espaces, mais uniquement de la disposition correcte des éléments dont il a la charge.

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