HTML and CSS Reference
Figure 6-13. The alignment and width of the inline block have been changed
■ The vertical-align property also affects inline elements. However, since the alignment is in relation to
the surrounding line, the only values that affect inline text elements are sub and super .
These examples might seem rather impractical, but they have been designed to demonstrate the different
behavior of inline text elements and inline blocks. The following exercise offers a more practical use for inline
blocks when styling a form.
exerCise: Using the display property to style Form laBels
in this exercise, you'll take a simple HTMl form and use the display property to style the labels. Setting the
value to inline-block and giving the labels a declared width makes it easy to align text fields vertically.
However, applying the same styles to all labels isn't always appropriate, so you'll use descendant and
attribute selectors to apply different styles where necessary.
Use form.html and form.css in the ch06/begin folder as your starting point. The style sheet contains only the
following style rule, which sets the font, background color, and text color for the page:
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
open form.html and load it into a browser. As Figure 6-14 shows, the text fields
are not aligned vertically, and there's a border around the set of radio buttons. The
border is added automatically by browsers because the radio buttons are wrapped in
a <fieldset> .