| <!DOCTYPE html> |
| <!-- |
| | For inline non-replaced elements, the box used for alignment is the box whose |
| | height is the "line-height" (containing the box's glyphs and the half-leading |
| | on each side). |
| | 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; |
| } |
| .with-align-top { |
| vertical-align: top; |
| } |
| .with-align-bottom { |
| /*vertical-align: bottom;*/ |
| } |
| .with-normal-line-height { |
| line-height: normal; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="baseline-marker"></div> |
| <span class="with-align-top">b</span> |
| <span class="with-align-bottom">q</span> |
| <span class="with-normal-line-height with-align-top">b</span> |
| <span class="with-normal-line-height with-align-bottom">q</span> |
| </body> |
| </html> |
