blob: 2174b76b1b44cd7715b45cb1c89db21f501e3e88 [file] [log] [blame]
<!DOCTYPE html>
<!--
| "line-height" specifies the minimal height of line boxes within the element.
| The minimum height consists of a minimum height above the baseline and
| a minimum depth below it, exactly as if each line box starts with
| a zero-width inline box with the element's font and line height properties.
| We call that imaginary box a "strut."
| https://www.w3.org/TR/CSS21/visudet.html#line-height
-->
<html>
<head>
<style>
body {
font-family: Roboto;
font-size: 50px;
font-weight: bold;
}
.line-height-normal {
background-color: #1de9b6;
line-height: normal;
}
.line-height-smaller-than-font-size {
background-color: #1de9b6;
line-height: 25px;
}
.line-height-larger-than-font-size {
background-color: #1de9b6;
line-height: 100px;
}
.baseline-marker {
background-color: #00bfa5;
display: inline-block;
height: 3px;
width: 25px;
}
.tall-box {
background-color: #00bfa5;
display: inline-block;
height: 75px;
width: 25px;
}
.spacer {
height: 25px;
}
</style>
</head>
<body>
<div class="line-height-normal">
bq<div class="baseline-marker"></div>
</div>
<div class="spacer"></div>
<div class="line-height-smaller-than-font-size">
bq<div class="baseline-marker"></div>
</div>
<div class="spacer"></div>
<div class="line-height-smaller-than-font-size">
bq<div class="tall-box"></div>
</div>
<div class="spacer"></div>
<div class="line-height-larger-than-font-size">
bq<div class="baseline-marker"></div>
</div>
</body>
</html>