CODEWITHSUNDEEP
htmlcss
Labrador
Labrador

Reputation: 673

whitespace between <ul> and first <li> gobbled up despite inline-block mode

The following JsFiddle is adapted from a post I read explaining some on whitespace behavior in HTML:

http://jsfiddle.net/ng5yuqjf/4/

According to the piece mentioned above, whitespace in the HTML document is reflected between inline-block elements.

However, in the fiddle above, there is no space between the a character and the first <li>, despite the presence of whitespace between the two elements in the HTML file, and despite everything being set to inline-block.

Somehow, it seems like the whitespace between <ul> and the first <li> doesn't count.

I'm wondering if this is reflected in some spec somewhere, or if it affords a short theoretical explanation.

Thanks!

PS: For reference, the full HTML + css of above fiddle:

<tspan>
a</tspan><ul class="people-list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

//

* {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
.people-list {
    list-style-type: none;
}
.people-list li {
    width: 2em;
    height: 2em;
    background: #f06;
    border: 1px solid;
}

Upvotes: 1

Views: 195

Answers (1)

Alohci
Alohci

Reputation: 82986

The whitespace between <ul> and the first <li> is in the DOM, so if you want it to show up, just make the ul display:inline instead of display:inline-block.

Like this:

* {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
.people-list {
    list-style-type: none;
    display:inline; /* Add this line */
}
.people-list li {
    width: 2em;
    height: 2em;
    background: #f06;
    border: 1px solid;
}
style, script, title {
    display:none;
}
<tspan>
a</tspan><ul class="people-list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

The theoretically reason behind this is that display:inline-block creates its own set of line boxes for its contents, which for the ul element includes the white space before the first li element. Because that space is now at the start of a line, is is discarded for rendering according to the rules of white-space:normal - 16.6.1 The 'white-space' processing model, "as each line is laid out", step 1.

Whereas, when the ul is display:inline, it does not create its own line boxes, the space is then not at the start of a line, and is not discarded when rendering.

Upvotes: 2

Related Questions