Empty div vs div with text having inline-block property

Question

Want to know the reason for this behavior.

CSS

div {
   display: inline-block;
   margin-right: 2px;
   width: 20px;
   background-color: red;
}

Empty div

<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>

behavior: element increases from bottom to top (height)

div with text

<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>

behavior: element increases from top to bottom (height)

see it in action: http://jsfiddle.net/8GGYm/

score 4 · Answer 1 · edited Oct 25 '21 at 12:20

4

please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:

div {
    display: inline-block;
    margin-right: 2px;
    width: 20px;
    background-color: red;
    vertical-align: bottom;
}

http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height

'vertical-align': baseline Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

edited Oct 25 '21 at 12:20

Jacob Lockard

1,195
9
24

answered Jul 21 '14 at 10:29

sylwester

16,498
1
25
33

1

why the two behavior happened? default is `top` means should apply in both the cases. right? – Suresh Ponnukalai Jul 21 '14 at 10:36
by default is align to base line you can find more here : http://www.w3schools.com/cssref/pr_pos_vertical-align.asp – sylwester Jul 21 '14 at 10:42
@SureshPonnukalai 'vertical-align':baseline -> Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline. http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height – sylwester Jul 21 '14 at 10:51
2

The default `vertical-align` is `baseline` ([jsFiddle](http://jsfiddle.net/8GGYm/3/) - click somewhere in the result frame) If there is no text inside, the div is treated like an image would be treated, and is itself aligned on the baseline. If there is text inside, the text inside will be aligned to the baseline instead, and the div will only be a wrapper that adjusts accordingly. Because text is aligned to the top left of its parent, the rest of the div fill flow right, and down. – MildlySerious Jul 21 '14 at 10:55
@SureshPonnukalai exactly – sylwester Jul 21 '14 at 11:04
I know that using verticle-align property I can get the same result. but why only putting the text in the empty div change the structure? – kp singh Jul 21 '14 at 11:33
because if div is empty is aligned to bottom of parent's baseline, if div contain text is aligned to his own baseline – sylwester Jul 21 '14 at 11:47
The empty div has a baseline at its bottom. If you add text, the div will inherit the baseline of the text – Falco Jul 21 '14 at 14:11

score 4 · Answer 2 · answered Jul 21 '14 at 10:36

Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.

you can read the this for more details.

When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.

Hope this is helpfull.

score 0 · Answer 3 · answered Jul 21 '14 at 10:33

0

Add

vertical-align: bottom;

to your CSS. Hope it works as you want.

answered Jul 21 '14 at 10:33

Mayank Bothra

93
1
1
8

score 0 · Answer 4 · answered Jul 21 '14 at 10:47

I guess this can be explained by the text alignment, independently from divs.

Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.

<h1>Empty div</h1>
Some text
    <div style="height:20px;"></div>
    <div style="height:40px;"></div>
    <div style="height:60px;"></div>
    <div style="height:80px;"></div>
continuing here

<h2>Div with text</h2>
Some text 
    <div style="height:20px;">20</div>
    <div style="height:40px;">40</div>
    <div style="height:60px;">60</div>
    <div style="height:80px;">80</div>
continuing here

...

div {
       display: inline-block;
       margin-right: 2px;
       width: 20px;
       background-color: red;
    }

Fiddle

In the above fiddle, you can see that the text line is the "guideline".

Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.

I'm sorry, maybe not very clear but I hope you understand my view.

Empty div vs div with text having inline-block property

4 Answers4

Linked