Why does this space appear?

Question

These boxes have the same styles but different structures.

http://codepen.io/KevanM/pen/mWeOJV (code below)

Why does the second row have a space between the boxes, but not on the second - looking in Chrome Tools, there's no space taken up by margin or padding.

<div class="switch">
    <p class="english">
        <span class="switch-active">Foo</span>
        <a title="Cymraeg" href="#">
            <span class="cymraeg">Bar</span>
        </a>
    </p>
</div>

<hr />

<div class="switch">
    <p class="cymraeg">
        <a title="English" href="#">
            <span class="english">Foo</span>
        </a>
        <span class="switch-active">Bar</span>
    </p>
</div>

CSS:

.switch p {
color: #fff;
}

.switch .english span.switch-active {
background-color: #b50038;
}
.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .cymraeg span.switch-active {
background-color: #b50038;
}

.switch .cymraeg span {
background-color: #bbb;
padding: 10px;
}

score 4 · Accepted Answer · answered Feb 28 '17 at 12:37

4

There is a space before your span tag. Remove it and the space will be gone!

<div class="switch"><p class="cymraeg"><a title="English" href="#"><span class="english">Foo</span></a>`space comes here`<span class="switch-active">Bar</span></p>

answered Feb 28 '17 at 12:37

Chaitali

631
4
12

Martin · Answer 2 · 2017-02-28T13:02:55.177

It is because (some of) your elements are inline-block display type, they are sensitive to the whitespace in the HTML code. If you remove the white space between the foo/bar anchor and span elements the space will disappear .

 .... active">Foo</span><a title="Cymraeg" href="#"><span ...
                      ^^^^^
                No gap, no space.               

<hr/>

 ...<span class="english">Foo</span></a>  <span class="switch .... 
                                       ^^^^^^
                                  Gap in code, gap in output

Solutions:
Remove whitespace between HTML elements in your code.

Or, read a good post by David Walsh about how to remove the space in code appearing in HTML/CSS output.

score 1 · Answer 3 · answered Feb 28 '17 at 12:41

Note that you have spaces in between the closure of your tag and span on the second example:

</a> Bar

remove it:

</a>Bar</p>

and you should be fine:

.switch .english span.switch-active {
background-color: #b50038;
}
.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .english span {
background-color: #bbb;
padding: 10px;
}

.switch .cymraeg span.switch-active {
background-color: #b50038;
}

.switch .cymraeg span {
background-color: #bbb;
padding: 10px;
}

<div class="switch"><p class="english"><span class="switch-active">Foo</span><a title="Cymraeg" href="#"><span class="cymraeg">Bar</span></a></p></div>

<hr/>

<div class="switch"><p class="cymraeg"><a title="English" href="#"><span class="english">Foo</span></a><span class="switch-active">Bar</span></p>

Why does this space appear?

3 Answers3