HTML and CSS Reference
In-Depth Information
top */
}
This code produces the appearance of
Figure 6-13
.
The width and height and margin
top are ignored because these are two inline-level elements.
Figure 6-13.
Two inline-level elements will line up side by side by default.
Now if an additional style rule is added to convert the second box into a block-level
element:
a.block {
display:block;
/*
treat
as
block-
level element */
}
the appearance of the second link changes to include the width and height (and margin
so the elements don't overlap), as shown in
Figure 6-14
. The whole area of the larger
rectangular shape is part of the link's active area, so having an anchor element display
as a block-level element offers more flexibility in the size of the linked area. This aspect
is particularly useful when creating menus, for instance.
Figure 6-14.
Inline-level and block-level boxes. The block-level box moves to its own line.
A problem with setting an inline-level element to display as a block-level element is
that the block element will move below the content that came before it, starting a new
line of content, as shown in
Figure 6-14
.
There is additional display property that can
format the element as being in a block-level box but then treat the formatted box as if
Search WWH ::
Custom Search