blob: f278de619f199d7acb1f3fb4445e73546310d080 [file] [log] [blame]
<!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).
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;
<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>