<span class="line"><!-- --><span class="line v-line top red"></span><!-- --><span class="line v-line bottom red"></span><!-- --><span class="line v-line text-top green"></span><!-- --><span class="line v-line text-bottom green"></span><!-- --><span class="line v-line baseline blue"></span><!-- --><span class="line center"> <span class="middle">This </span> <span class="rect text-top"></span> <span class="top">top </span> <span class="rect text-bottom"></span> <span class="bottom"> bottom</span> <span>I'm on the baseline</span> </span> </span> <span class="line" style="margin-top: 50px; line-height:50px;"><!-- --><span class="line v-line baseline blue"></span><!-- --><span class="line v-line top red"></span><!-- --><span class="line v-line bottom red"></span><!-- --><span class="line v-line text-top green"></span><!-- --><span class="line v-line text-bottom green"></span><!-- --><span class="line center">abcpqtqpmm</span> </span> <span class="line" style="margin-top: 50px;"><!-- --><span class="line v-line baseline blue"></span><!-- --><span class="line v-line top red"></span><!-- --><span class="line v-line bottom red"></span><!-- --><span class="rect"></span> </span>
body { font-size: 20px; } .line { display: inline-block; width: 100%; } .border { border-width: 1px; border-color: red; } .dotted { border-style: dotted; } .center { text-align: center; } .rect { display: inline-block; width: 20px; height: 40px; background-color: #ccc; } .middle { vertical-align: middle; } .top { vertical-align: top; } .bottom { vertical-align: bottom; } .text-top { vertical-align: text-top; } .text-bottom { vertical-align: text-bottom; } .baseline { vertical-align: baseline; } .v-line { position: relative; margin-right: -100%; border-top-width: 1px; border-top-style: dotted; } .blue { border-color: blue; } .green { border-color: green; } .red { border-color: red; }