| <!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> |