Why are there spaces between my elements?

Question

This happened after I cleaned up my code and all the divs into separate lines.

The picture is what happens when the code is like this:

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

//But not when it is like this:

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

Amadan · Answer 1 · 2018-12-19T05:40:12.590

HTML collapses any non-zero amount of whitespace to a single space, unless otherwise directed by the white-space CSS property.

You have two newlines between each div, as well as a bunch of indentation spaces. All of those are whitespace, and result in a single space being rendered between your elements.

Also note that HTML5 semantics does not allow <div> inside a <p>; your #buttons is autoclosed immediately, and does not actually contain <div> elements (unless you are not using HTML5). So assuming you have this:

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

You can avoid the spaces in a number of different ways, most of them nonintuitive. One would be to use the autoclosing semantics to your advantage. Autoclosing happens just before the next tag, so no space can get between elements. You can't get it with <div>, since <div> can nest; so...

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

Another solution would be to use float, which will position the elements outside the place where they normally belong, and leave the nasty spacies behind.

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

A modern solution would be to use flex, which similarly does not care about spaces, only about correctly laying out elements under its care.

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

Why are there spaces between my elements?

1 Answers1