CODEWITHSUNDEEP
jqueryhtmlcss
projeqht
projeqht

Reputation: 3160

Why do spaces in HTML markup cause CSS to differ?

I have the following markup format:

<!-- .section markup with line breaks and indentation (normal formatted coding) -->
<form id="form" name="form">
  <div class="section">
    <input type="checkbox" class="switch" />
    <select class="overlays" name="overlays">
        <option value="test">Test</option>
    </select>
    <input type="text" class="parameters" />
  </div>
</form>
<span id="plus">+</span>

And some JQUERY to append more .section as I need like this:

$('#plus').click(function () {
  $('#form').append('<div class="section"><input type="checkbox" class="switch" /><select class="overlays" name="overlays"><option value="test">Test</option></select><input type="text" class="overlay_parameters" name_parameters" /></div>');
});

But I noticed that the CSS margins/padding was a bit off whenever I appended .section

Then, I realized that if I used this following format:

<!-- .section markup all in one line -->
<form id="form" name="form">
  <div class="section"><input type="checkbox" class="switch" /><select class="overlays" name="overlays"><option value="test">Test</option></select><input type="text" class="parameters" /></div>
</form>
<span id="plus">+</span>

NOW the original .section that is supplied by markup has the same CSS spacing as the JQUERY appended .section

First format: http://jsfiddle.net/projeqht/NCfym/

Second format: http://jsfiddle.net/projeqht/NCfym/1

So my question is:

Why is the formatted HTML markup outputting different CSS spaces than the exact same markup written on 1 line of HTML?

Upvotes: 7

Views: 372

Answers (3)

Shauna
Shauna

Reputation: 9596

It's because the select and checkbox are display: inline-block. This makes them sensitive to white space.

Elements that are inline-block are sensitive to white space, because inline elements are (otherwise, you would have to code in all the spaces in your text, because text characters are considered inline for purposes of behavior). Inline-block elements behave like both inline elements (sensitive to white space, sit next to each other instead of on top of each other), and block elements (heed padding CSS).

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116110

A line break counts as a space in HTML, so the following code has a space between elements:

<input type="text">
<input type="text">

This one has too:

<input type="text"> <input type="text">

But this one has no space:

<input type="text"><input type="text">

This is not a 'CSS space', but an old school 'HTML space'. :D

Upvotes: 9

FrostbiteXIII
FrostbiteXIII

Reputation: 891

HTML removes multiple extra lines/spaces, but still leaves ONE space when it does this. :)

For example, this will do the same thing:

http://jsfiddle.net/9ZqAr/

<form id="form" name="form">
    <div class="section">
        <input type="checkbox" class="switch" /><select class="overlays" name="overlays">
            <option value="test">Test</option>
        </select><input type="text" class="parameters" />
    </div>
</form> <span id="plus">+</span>

Upvotes: 3

Related Questions