Home >> Tutorials/FAQs >> CSS Tutorials >> Index
CSS Tutorials - In-line Elements Are Formatted Side by Side
By: FYICenter.com
(Continued from previous topic...)
How In-line Elements Are Formatted Side by Side?
If in-line elements are coded next to each other, they will be formatted side by side in a line box.
Their individual widths and heights will be respected. Their relative vertical positions will be controlled
by the vertical-align style property, which takes 8 different values: baseline, sub, super, top, text-top,
middle, bottom, text-bottom.
The tutorial exercise below shows you some good examples on align in-line elements in different ways:
<html><head>
<style type="text/css">
H1 {font-size: 20px}
DIV.page {width: 450px; border: 1px solid black}
TABLE#out {background-color: #ffdddd}
TD#box {border: 1px solid black}
P#box {width: 300px; height: 150px;
font-size: 14px;
background-color: #ffffff}
SPAN.top {font-size: 12px;
line-height: 30px;
background-color: #ffdddd}
SPAN.middle {font-size: 40px;
line-height: 50px;
background-color: #ddffdd}
SPAN.bottom {font-size: 12px;
line-height: 20px;
background-color: #ddddff}
#top {vertical-align: top}
#middle {vertical-align: middle}
#bottom {vertical-align: bottom}
#textTop {vertical-align: text-top}
#textBottom {vertical-align: text-bottom}
#super {vertical-align: super}
#sub {vertical-align: sub}
TD.legend#g50 {height: 50px; background-color: #dddddd}
TD.legend#w50 {height: 50px; background-color: #ffffff}
</style>
</head><body><div class="page">
<H1>In-line Element Alignments</H1>
<table id=out><tr>
<td id=box><p id=box>
<span class=top id=top>Thank</span>
<span class=middle id=middle>you</span>
<span class=bottom id=bottom>for</span>
<span class=middle id=middle>visiting</span>
<span class=top id=top>FYIcenter.</span>
<br/>
<span class=top id=textTop>Thank</span>
<span class=middle id=middle>you</span>
<span class=bottom id=textBottom>for</span>
<span class=middle id=middle>visiting</span>
<span class=top id=textTop>FYIcenter.</span>
<br/>
<span class=top id=supper>Thank</span>
<span class=middle id=middle>you</span>
<span class=bottom id=sub>for</span>
<span class=middle id=middle>visiting</span>
<span class=top id=supper>FYIcenter.</span>
</p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=g50>- top/bottom</td></tr>
<tr><td class=legend id=w50>- text-top/bottom</td></tr>
<tr><td class=legend id=g50>- supper/sub</td></tr>
</table></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>
Save this document as verticalAlign.html, and view it with a browser,
you will see how different vertical-align values behave as shown below:
(Continued on next topic...)
- How Many Ways Can Elements Relate to Each Other?
- How In-line Elements Are Formatted Side by Side?
- How Nested Block Elements Are Formatted?
- How Two Block Elements Are Formatted as a Stack?
- How Floating Elements Are Formatted?
- Why Is the Top Margin Not Showing?
- How Are Vertical Margins between Two Block Elements Collapsed?
- How Are Parent Padding Spaces Collapsed with the Child Margins?
- How Is the Width of a Parent Element Related to Child Elements?
- How Is the Full Width of a Block Element Extended?
- How To Test Child Full Width Extension?
- How To Test Parent Content Width Extension?
- What Are White Spaces in HTML Documents?
- How White Spaces Are Formatted?
- What Happens to Multiple White Spaces in In-line Elements?
|