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
a.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