HTML and CSS Reference
In-Depth Information
If that layout isn't to your liking and you'd prefer the labels above the controls, a simple
display: block
,
as in Listing 8-32, does the trick. There's no need for floats or widths; simply styling the
label
element as
block-level will put it on its own line. A small bottom margin adds a bit of space to keep things clean, and
we've declared the margin with an em unit so it's proportional to the size of the text (0.25em is one quarter
of the font size).
Listing 8-32
. A CSS rule styling all label elements as block-level
label {
display: block;
margin-bottom: 0.25em;
}
Figure 8-37 shows the results, with the labels above their associated fields.
Figure 8-37
. The labels are now styled as block-level so each appears on its own line
Changing Fonts in Form Controls
Browsers typically render text in an
input
,
select
,
textarea
, or
button
element in a default size and
typeface that may differ from the default font for regular body text. Furthermore, this default form font
persists in spite of any base font you've declared for the rest of the document (as you learned in Chapter
4). That's because the browser's built-in style sheet declares fonts specifically for form elements rather
than allowing them to inherit their font settings as other elements do. There are good reasons for this,
since it's especially important for form elements to be readable and render consistently, but it can still be a
thorn in a designer's side.
