'Enter' between
tag and tag breaks the layout

Question

I've go an html from frontend developers. Part of the menu looks like the following:

<ul id="subNav">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
</ul>

I had to add some programming tags, and to make code easier to read I've changed it to:

<ul id="subNav">
    <li>
        <a href="#">Menu item 1</a>
    </li>
    <li>
        <a href="#">Menu item 2</a>
    </li>
</ul>

After my change, the menu is broken. Space between elements are smaller. I have compared computed css and they look the same. Why is that? Why 'enter' between <li> and <a> break the layout?

Tested on Chrome.

EDIT: Fiddle: http://jsfiddle.net/bqyjL6rf/

Please show relevant CSS - perhaps create a snippet or a jsfiddle.net — mplungjan, Jan 29 '15 at 13:18
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Naeem Shaikh, Jan 29 '15 at 13:19
could you instead show an image or fiddle of what you want to actually happen... I have a strong feeling you're going about it incorrectly.. Otherwise @NaeemShaikh is correct. — Cayce K, Jan 29 '15 at 13:28

Rob · Answer 1 · 2015-01-29T14:56:40.840

2

When you ran the tags together, you eliminate the white space inserted in inline elements. Breaking them apart, as in your second example, puts that white space back in and that is why your layout has changed.

Just as words you type into a paragraph, inline elements also have their white space between elements.

edited Jan 29 '15 at 14:56

answered Jan 29 '15 at 13:19

Rob

14,746
28
47
65

rajesh · Answer 2 · 2015-01-29T15:01:37.760

The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

To adjust that set display:inline-block instead of using display:inline

li {
    font-family: SlateProBk;
    font-size: .6rem;
    line-height: .6rem;
    text-transform: uppercase;
    opacity: 0.75;
    -webkit-opacity: 0.75; 
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style-type: none;
    -webkit-font-smoothing: subpixel-antialiased;
}

Check this fiddle http://jsfiddle.net/bqyjL6rf/1/

'Enter' between tag and tag breaks the layout

2 Answers2

'Enter' between
tag and tag breaks the layout