HTML and CSS Reference
In-Depth Information
Reading content in an HTML document, without any JavaScript or CSS
applied, is a top-down and left-to-right affair. Block elements take up the
entire width of the document and follow one after another with their
inline content flowing inside them. Margins and padding may alter the
look or spacing some, but they alone do not change the positioning of
the elements.
You have three ways to change the default positioning and interaction
between elements in the top-down blob of content: You can force an
element to behave like a different type of element, you can pull the item
out of the flow completely, or you can pull the item to the side of its
container and allow other items to wrap around it.
The
display
property is the key to the entire layout castle. I've already
covered block elements and inline elements, but you need a number of
other element types to define all the content that might display on a
web page, including the following:
■
inline
: Creates one or more inline boxes, the familiar inline content
■
block
: Creates a block box
■
inline-block
: Creates a block box that behaves like an inline box,
similar to the image (replaced element) behavior
■
list-item
: Creates a block box for the content and the list item
marker
■
table
,
table-row
,
table-caption
: Creates three of the types of
elements needed to present a table (Chapter 10)
