This is the best, most lucid, and thorough explanation of vertical-align I've seen so far! Thanks!

A non-breaking space   fixes issues with the vertical alignment of inline block elements with no in-flow content.

What a read! I guess I am gonna read it mutiple times more.

want more useful articles like this <3

this article solves my problem，thanks

Thanks! This clarifies some of the most disturbing layout mysteries.

Excellent post, probably the best explanation of `vertical-align` out there.

Thanks Christopher I was trying to bottom align two text elements: one at the left corner the other to the right. I tried absolute positioning and floats; but I'm not too smart to make it work without any hacks. Initial search in Stack Overflow didn't yield any immediate answer. Implemented your suggestion of 50% width on each, display: inline-block. Then just have to text-align right the 2nd text. Solved my problem. Thanks!

Thank you!

Bravo!

Very useful post! Solved an issue I had with this info.

Thanks! Really useful article!

Nice, I really love this kind of posts! Thanks a lot.

Thank you so much for clarifying all these confusing concepts! Learned a lot!

In the section "A Gap Between Inline-Level Elements Is Breaking the Layout", there is this sentence "To remove the gap, we need to remove the white-space, for example with html comments (right)."

Is the "white-space" mentioned here the "strut" mentioned previously in the W3C specs?

Great write-up! I love the detailed explanation. There seems to be an issue in rendering the "Gap Between Inline-Level Elements Is Breaking the Layout" example, though: the two are stacked vertically, and not next to each other as the text suggests, and both stack their children vertically:

https://uploads.disquscdn.c...

(in both current FF and Chrome on Ubuntu). It does not seem to behave like what the text is describing.

Argh, turned out the html beautifier I recently added changed the markup in unintended ways. I fixed it.

Thanks for letting me know!

Looks perfect now--thanks for the quick follow-up.

Thanks a lot!!! This post's really really useful.

Amazing explanation! The spec is not very clear about this, specially the part that says that the line box baseline moves to fulfill the vertical alignments of the children elements. Kudos to you, sir!

Great article! Are you aware of any updates or differences in 2017?

No, everything is still the same. The specs haven't changed.

one of the best articles I've ever read ❤

the '"Movement Of the Line Box’s Baseline" solve my problem, good article

It's Clear, Best, Understood, Thanks!

For me it was still confusing :)

Great article, you're doing God's work. :)

Right into my bookmarks. Thanks!

This is just the best explanation. Thank you so much!

Thanks, This is the most valuable post for 'vertical-align'.

Good job. Thanks for sharing.

Kudos ! :)

I don't see any gap below when using "normal" without intrinsic dimensions inline-block elements. See here http://jsbin.com/guhoye, ? I only see gaps when using elements with intrinsic dimensions like images, form elements http://jsbin.com/jakazo
http://jsbin.com/dafefi

Yeah, that's because the baseline of an inline-block depends on whether it has content like text or not. Have a look at: http://christopheraue.net/2...

what if I have 2 inline-block elements of 25% each one and I want one align to left and the other to right.

I don't understand the following:
The text box simply is an inline element inside the line box without any alignment. Its top and bottom edges are defined by the line height.

if the text box height is determined by the line height, which property determine the height of line box?

The height of the line box is determined by its content. There is no property to set the line box's height.

* If the line is empty its only content is the text-box. In this case the height of the line box equals the height of the text-box, i.e. the line-height. This is also true, if the line only contains text.
* If the line has content, its content is vertically aligned in a way that it needs the least space. The resulting height is the height of the line box.

The line-height is the lower bound of the line box's height. The line box gets taller if its content would not fit into it otherwise.

Is there a way to defeat this behavior, i.e., to prevent a text box area from impinging on the line above or below when the character's height would cause that. In other words, is it possible to "clip" the top and/or bottom of a the text area of a given character? Not sure if this is the right question to be asking in the context of a "tall character" that does impinge when aligned up or down

Do you have a concrete example? A fiddle or codepen maybe?

Thanks. Here is a link to a fiddle (hopefully; never created one before) https://jsfiddle.net/0jo6fb.... It does not reflect the exact circumstance I had in mind (obliterating text above/below), but it does show the undesirable vertical effect on line spacing that I'd like to avoid.

The elements in the yellow highlighted boxes are aligned with position: relative and values for top or bottom. They don't use the vertical-align property. So, in this case, you can adjust the height of these boxes by explicitly setting their line-height (e.g. on the .highlight class). A value of 0.8em looks good for example.

Interesting. Thanks. An observation: The effect of that change is to cause shading not to extend over the lower portion of the construct, as you can see in the paragraph that uses the code the code 9830. Nevertheless, this is a great start on fixing the problem.

Great post! Demystifies a bunch of things for me. Thanks!

Also of note: you can vertically align elements that use "display: table-cell;" (as long as they're inside a "display: table[-row]" of course. This can be very useful, but it almost always requires some extra wrapping elements.

Also, Firefox has some issues with positioning cells and/or elements inside it (can't recall directly which one it was).

It couldn't position things absolutely relative to cells before version 31. Now this bug has been fixed.

Wow, incredible and in-depth information about vertical-align. Had no clue how it really worked. I feel empowered now. Thank you!

I loved this one... </div><div>
I Thinks this is the best solution for writing maintable html and removing the white line, although i use the spacing thing to remove the gaps.

It works well also with display: table-cell :)