Vertical alignment works on block elements

Question

I was told that vertical-align only works for inline, and table elements, however, today I was playing around with vertical-align on a block element, it works just fine? How is that possible? In this case, does vertical-align work for all element types? Or if not, what doesn't it work on?

 #wrap { border: 1px solid black; width: 500px; height: 500px; } #alignTop { vertical-align: top; border: 1px solid black; } 

 <div id = 'wrap'> <div id = 'alignTop'> alignTop </div> </div> 

Answer 1

By default block element stack on top of each other, so it DOESN'T work.

See W3C

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

And you can see on W3C that vertical-align doesn't work in block elements, only applies to inline-level and table-cell

 Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit Initial: baseline Applies to: inline-level and 'table-cell' elements Inherited: no Percentages: refer to the 'line-height' of the element itself Media: visual Computed value: for <percentage> and <length> the absolute length, otherwise as specified 

Snippet

 #wrap { border: 1px solid black; width: 500px; height: 500px; } #alignTop { vertical-align: top; border: 1px solid black; } #alignMiddle { vertical-align: middle; border: 1px solid black; } #alignBottom { vertical-align: bottom; border: 1px solid black; } 

 <div id='wrap'> <div id='alignBottom'>alignBottom</div> <div id='alignTop'>alignTop</div> <div id='alignMiddle'>alignMiddle</div> </div> 

Answer 2

According to explanations documented on This link:

• HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. Traditionally, horizontal sizing and layout is easy; vertical sizing and layout was derived from that.
• vertical-align is used to specify two completely different behaviors depending on where it is used

vertical-align in table cells

When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:

1. <td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
2. <td style="vertical-align:middle"> ... </td>
3. <div style="display:table-cell; vertical-align:middle"> ... </div>

vertical-align on inline elements

When vertical-align is applied to inline elements, however, it's a whole new ballgame. In this situation, it behaves like the (old, deprecated) align attribute did on <img> elements. In a modern, standards-compliant browser, the following three code snippets do the same thing:

1. <img align="middle" ...>
2. <img style="vertical-align:middle" ...>
3. <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>