| <!DOCTYPE html> |
| <!-- |
| | For all other [than inline non-replaced] elements, the box used for alignment |
| | is the margin box. |
| | https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 100px; |
| font-weight: bold; |
| line-height: 300px; |
| } |
| .baseline-marker { |
| background-color: #e0e0e0; |
| display: inline-block; |
| height: 5px; |
| width: 100px; |
| } |
| .inline-block { |
| display: inline-block; |
| height: 50px; |
| width: 100px; |
| } |
| .with-margin-top { |
| background-color: #2196f3; |
| margin-top: 50px; |
| } |
| .with-margin-bottom { |
| background-color: #3f51b5; |
| margin-bottom: 50px; |
| } |
| .with-align-top { |
| vertical-align: top; |
| } |
| .with-align-bottom { |
| /*vertical-align: bottom;*/ |
| } |
| </style> |
| </head> |
| <body> |
| <div class="baseline-marker"></div> |
| <div class="inline-block with-margin-top"></div> |
| <div class="inline-block with-margin-bottom"></div> |
| <div class="inline-block with-margin-top with-align-top"></div> |
| <div class="inline-block with-margin-bottom with-align-bottom"></div> |
| </body> |
| </html> |
