Inline-Block Element with No Text Renders Differently

inline-block element with no text renders differently

just a thought:

as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.

the solution:

to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)

Why my inline-block divs are not aligned when only one of them has text?

This is the consequence of the "baseline" vertical alignment in CSS. From the CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

baseline

Align the baseline of the box with the baseline of the parent box. If the box
does not have a baseline, align the bottom margin edge with the parent's baseline. (my emphasis)

Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.

When there is no text in the inline-block, then it has no baseline and so the second (bolded) sentence applies.

In the JSFiddle here: http://jsfiddle.net/WjCb9/1/ I have removed from your example the margin:1em which was creating (at least for me) a misleading illusion, and added the text baseline to show where the baseline of the containing box is. The baseline is along the bottom of the word "baseline", so you can see that the empty inline-block has its bottom margin edge aligned with the parent's baseline as required by the CSS rule above.

Why inline-block have different rendering than inline in firefox?

Perhaps the answer is already explained here in old post

I will like to clear the difference..

If the element is with style display:inline the style restricts the object in line-height.

But, when block comes with inline the behavior of the same changes.

It is inline but with block it will expand to the possible height or width available.

For a change. select the text in both the box, you will see the second box is selecting out of the box. that is overflow of line-height which is restricted by inline but with inline-block it will grow with overflow caused by padding + line-height

I think this will clear most of the doubts, please refer the old post for more details.

inline-block div with and without text not vertically aligned

Inline-block boxes are, by default vertically aligned such that the baseline of the inline-block box aligns to the baseline of the line box in which it is rendered.

The baseline of an inline-block box with one line of text, is the baseline of that line. More generally, the baseline of an inline-block is the baseline of the last line of text that it contains. But that means that there is no baseline for an inline-block that contains no text.

In such a situation a fall back rule kicks in, and the bottom of the inline-block box is placed on the baseline of its line box.

Why baseline of `inline-block` element with `overflow:hidden` is set to its bottom margin?

1. What the reason to change baseline of inline-block element from baseline of its line box to bottom margin edge?

The baseline of an 'inline-block' is changed to its bottom margin edge when its overflow property is set to hidden (full specification here).

As for the reason for this decision, I think since the overflown part is hidden, user agents (browsers) may choose to render that overflown part and not display it, or choose to not render it at all. And when the overflown part is not rendered, user agents have no way to tell the baseline of its last line box, as it is not rendered, where it goes is not known.

If the baseline of 'inline-block' whose overflow is set to hidden is still kept as the baseline of its last line box, user agents are forced to render what is hidden to user, which may hinder performance, or at least, put extra restrictions on user agents. What's more, in such case, other inline texts in the same line box are aligned to such a baseline where texts around the overflow-hidden inline-box is hidden, which is kind of stange and not intuitive.

I made a simple demo emulating that inline-block with overflow hidden still has its baseline set to the baseline of its last line box.

var isOverflowHidden = false;document.querySelector('button').onclick = function() {  document.getElementById('inline-box').style.overflow = isOverflowHidden ? '' : 'hidden';  isOverflowHidden = !isOverflowHidden;}

html { background: white; }#inline-box { display: inline-block; height: 18px; }.overflown { color: white; }

<p><button id="toggle">Toggle 'overflow: hidden;' on 'inline-block'</button></p>
<span>  texts sit  <span id="inline-box">    texts in inline-block <br>    <span class="overflown">      line 2 <br>      line 3    </span>  </span>  on baseline</span>

IE renders inline-block div differently than FF/Chrome

In HTML, button is not a "self-closing" tag, therefore, IE is actually doing it correctly. Just appending the /> to a tag does not automatically close it, as it does in XML. You need to do this:

<button id="fourth_button" type="button"><span>Button Text</span></button>

Chrome rendering inline-block height wrongly

Simply add vertical-align: top; or any other vertical-align value to your inline-block elements.

Also, calc(14.24px) makes no sense, use simply height: 14px;
Also, avoid the use of !important (there's almost no reason to use it if your CSS is well structured)

---

Related Topics