5

I don't understand why adding a text do a div seems to be changing how the div is parsed by the browser? Looks like the margin-top is changed, though it isn't.

HTML

<div id="nav">
  <div class="nav-left">left</div>
  <div class="nav-logo"></div>
  <div class="nav-right">right</div>
</div>

CSS

#nav {
    width: 400px;
    height: 30px;
    background: #f5f5f5;
    border: 1px solid grey;
    text-align: center;
}
.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
}
.nav-left {
    background: red;
}
.nav-right {
    background: blue;
}
.nav-right, .nav-left {
    width: 50px;
}
.nav-logo {
    background: yellow;
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

Code is also here: http://jsfiddle.net/NcA8r/

Andreas
  • 2,287
  • 2
  • 23
  • 26
  • 2
    Change the `vertical-align` value.. http://jsfiddle.net/4JXPb/ – Josh Crozier May 04 '14 at 21:31
  • Thanks for the solution, but help me and others understand. Why is this needed? Why does adding text change the look? It seem to me that browser default for a div is vertical-align: baseline; , but why does the dive behave differently with text inside ? – Andreas May 04 '14 at 21:45
  • 1
    here you can find all explained http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – keypaul May 04 '14 at 21:47
  • @Andreas Take a look at the [visual formatting model details](http://www.w3.org/TR/CSS2/visudet.html#line-height) – Josh Crozier May 04 '14 at 22:04

2 Answers2

3

As @JoshCrozier said, you need to add a vertical-align to your 3 divs.

This: 

.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
}

Should be:

.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
    vertical-align:top;
ᔕᖺᘎᕊ
  • 2,971
  • 3
  • 23
  • 38
  • 3
    Yes, but why? What is the rule? ;-) – Leo May 04 '14 at 21:40
  • @leo because he hadn't put it there, it defaulted to vertical-align:baseline; so his text was aligned with the baseline of his 'nav' div – ᔕᖺᘎᕊ May 04 '14 at 21:49
  • 1
    Thanks @shub, but I meant why `vertical-align:baseline` behaves this way. I do not understand it. ;-) – Leo May 04 '14 at 22:02
  • @Leo if you mean why it behaves differently with text and without, then its because the baseline is the baseline of the **text**. Without text the baseline practically becomes the baseline of the div, instead of the text. More info @ http://css-tricks.com/what-is-vertical-align/ ;) – ᔕᖺᘎᕊ May 04 '14 at 22:11
  • Yes, I see that, but what is the rule? I can't find the definition. Also, if I put a space there in the middle div it still does not align vertical as the other divs. But perhaps spaces inside a tag disappears, but those outside does not? Whatever outside/inside could be... ;-) – Leo May 04 '14 at 22:19
  • @Leo ...inline-blocks – ᔕᖺᘎᕊ May 04 '14 at 22:43
  • Ok, thanks. I am beginning to accept this without a definition. ;-) – Leo May 05 '14 at 00:20
1

It happens because you used display: inline-block; in your inner divs.

inline-block elements are vertical-align:baseline; by default.

Check this out this great answer.

"The default value for vertical-align in CSS is baseline."

And this one too.

Community
  • 1
  • 1
Itay Gal
  • 10,706
  • 6
  • 36
  • 75