| <!DOCTYPE html> |
| <!-- |
| | In case boxes are aligned 'top' or 'bottom', they must be aligned so as to |
| | minimize the line box height. If such boxes are tall enough, there are |
| | multiple solutions and CSS 2.1 does not define the position of the line |
| | box's baseline. |
| | https://www.w3.org/TR/CSS21/visudet.html#line-height |
| | For the cases where CSS 2.1 does not specify the baseline position, the |
| | behavior matches the behavior or WebKit and Blink. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 8px; |
| } |
| .baseline { |
| color: #E3F2FD; |
| background-color: #0D47A1; |
| } |
| .medium-box { |
| display: inline-block; |
| width : 10px; |
| height: 15px; |
| } |
| .large-box { |
| display: inline-block; |
| width : 10px; |
| height: 20px; |
| } |
| .extra-large-box { |
| display: inline-block; |
| width : 10px; |
| height: 30px; |
| } |
| .top { |
| vertical-align: top; |
| background-color: #448AFF; |
| } |
| .bottom { |
| vertical-align: bottom; |
| background-color: #82B1FF; |
| } |
| </style> |
| </style> |
| </head> |
| <body> |
| |
| <div style="background-color: #E0E0E0;"> |
| |
| <span class="baseline"> |
| x |
| <span class="medium-box top"></span> |
| <span class="large-box bottom"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #BDBDBD;"> |
| |
| <span class="baseline"> |
| x |
| <span class="large-box bottom"></span> |
| <span class="medium-box top"></span> |
| </span> |
| |
| </div> |
| |
| <div style="background-color: #E0E0E0;"> |
| |
| <span class="baseline"> |
| x |
| <span class="extra-large-box bottom"></span> |
| <span class="medium-box top"></span> |
| <span class="large-box bottom"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #BDBDBD;"> |
| |
| <span class="baseline"> |
| x |
| <span class="extra-large-box bottom"></span> |
| <span class="large-box bottom"></span> |
| <span class="medium-box top"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #E0E0E0;"> |
| |
| <span class="baseline"> |
| x |
| <span class="medium-box top"></span> |
| <span class="large-box bottom"></span> |
| <span class="extra-large-box bottom"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #BDBDBD;"> |
| |
| <span class="baseline"> |
| x |
| <span class="large-box bottom"></span> |
| <span class="medium-box top"></span> |
| <span class="extra-large-box bottom"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #E0E0E0;"> |
| |
| <span class="baseline"> |
| x |
| <span class="extra-large-box bottom"></span> |
| <span class="medium-box top"></span> |
| <span class="large-box bottom"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #BDBDBD;"> |
| |
| <span class="baseline"> |
| x |
| <span class="extra-large-box bottom"></span> |
| <span class="large-box bottom"></span> |
| <span class="medium-box top"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #E0E0E0;"> |
| |
| <span class="baseline"> |
| x |
| <span class="large-box top"></span> |
| <span class="medium-box bottom"></span> |
| </span> |
| |
| </div> |
| <div style="background-color: #BDBDBD;"> |
| |
| <span class="baseline"> |
| x |
| <span class="medium-box bottom"></span> |
| <span class="large-box top"></span> |
| </span> |
| |
| </div> |
| |
| </body> |
| </html> |
