| <!DOCTYPE html> |
| <!-- |
| | This shows some examples of where the vertical alignment or line box height |
| | is incorrect when there is no text in the div |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| } |
| |
| div { |
| display: inline-block; |
| } |
| div.bluebg { |
| display: block; |
| background: #2020F0; |
| } |
| div.greybg { |
| display: block; |
| background: #B0B0B0; |
| } |
| div.greybg1 { |
| display: block; |
| background: #C0C0C0; |
| } |
| div.greybg2 { |
| display: block; |
| background: #D0D0D0; |
| } |
| div.greybg3 { |
| display: block; |
| background: #E0E0E0; |
| } |
| |
| div.boxed_baseline { |
| vertical-align: baseline; |
| background: #202020; |
| width : 16px; |
| height : 32px; |
| } |
| div.v_baseline { |
| vertical-align: baseline; |
| background: #202000; |
| width : 16px; |
| height : 16px; |
| } |
| div.boxed_middle { |
| vertical-align: middle; |
| background: #404040; |
| width : 16px; |
| height : 32px; |
| } |
| div.v_middle { |
| vertical-align: middle; |
| background: #404000; |
| width : 16px; |
| height : 16px; |
| } |
| div.boxed_top { |
| vertical-align: top; |
| background: #808080; |
| width : 16px; |
| height : 32px; |
| } |
| div.v_top { |
| vertical-align: top; |
| background: #808000; |
| width : 16px; |
| height : 16px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="greybg1"><div class="boxed_middle"></div><div class="v_middle"></div></div> |
| <div class="greybg2"><div class="boxed_top"></div><div class="v_top"></div></div> |
| <div class="greybg3"><div class="boxed_baseline"></div><div class="v_baseline"></div></div> |
| <div class="greybg"> |
| <div class="boxed_middle"></div> |
| <div class="boxed_baseline"></div> |
| </div> |
| <div class="bluebg"> |
| <div class="boxed_middle"></div><div class="v_middle"></div> |
| <div class="boxed_top"></div><div class="v_top"></div> |
| <div class="boxed_baseline"></div><div class="v_baseline"></div> |
| </div> |
| <div class="greybg"> |
| <div class="boxed_baseline"></div> |
| <div class="boxed_middle"></div> |
| </div> |
| <div class="bluebg"> |
| <div class="boxed_top"></div><div class="v_top"></div> |
| <div class="boxed_baseline"></div><div class="v_baseline"></div> |
| <div class="boxed_middle"></div><div class="v_middle"></div> |
| </div> |
| </body> |
| </html> |
