How does the vertical-align property work?

Question

I do not understand when vertical-align will and won\'t work.

Every time I run into a use case for vertical-align it seems to be a coin tos

Answer 1

Simply said: vertical-align is only active/valid when the element it is applied to has display: inline-block or ìnline, which for example is useful if you want to align a bunch of images at their top border: You define them as inline-blocks and apply vertical-align: top to them

Here is an example:

.wrapper {
  height: 250px;
  border: 1px solid green;
}

.wrapper>img {
  display: inline-block;
  vertical-align: top;
}

In your fiddle, the elements are nested into each other, not next to each other, i.e. they are not siblings - there is only one child element each, so there is no alignment of siblings like in the example above.