HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [92]
Figure 4-4 applies a border style to the bottom of the heading and to the left side of the paragraph. Partial borders are pretty easy to build, as you can see from the code listing:
Figure 4-4: You can specify parts of your border if you want.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
This heading has a bottom border
Paragraphs have several borders defined.
Paragraphs have several borders defined.
Notice the border styles. CSS has style rules for each side of the border: border-top, border-bottom, border-left, and border-right. Each of these styles acts like the border shortcut, but it only acts on one side of the border.
There’s also specific border attributes for each side (bottom-border-width adjusts the width of the bottom border, for example), but they’re almost never used because the shortcut version is so much easier.
Introducing the Box Model
XHTML and CSS use a specific type of formatting called the box model. Understanding how this layout technique works is important. If you don’t understand some of the nuances, you’ll be surprised by the way your pages flow.
The box model relies on two types of elements: inline and block-level. Block-level elements include
The main difference between inline and block-level elements is this: Block-level elements always describe their own space on the screen; whereas, inline elements are allowed only within the context of a block-level element.
Your overall page is defined in block-level elements, which contain inline elements for detail.
Each block-level element (at least in the default setting) takes up the entire width of the screen. The next block-level element goes directly underneath the last element defined.
Inline elements flow differently. They tend to go immediately to the right of the previous element. If there’s no room left on the current line, an inline element drops down to the next line and goes to the far left.
Borders, margin, and padding
Each block-level element has several layers of space around it, such as:
♦ Padding: The space between the content and the border.
♦ Border: Goes around the padding.
♦ Margin: Space outside the border between the border and the parent element.
Figure 4-5 shows the relationship among margin, padding, and border.
Figure 4-5: Margin is outside the border; padding is inside.
You can change settings for the margin, border, and padding to adjust the space around your elements. The margin and padding CSS rules are used to set the sizes of these elements, as shown in Figure 4-6.
Figure 4-6: Margins and padding affect the positioning of an element.
In Figure 4-6, I applied different combinations of margin and padding to a series of paragraphs. To make things easier to visualize, I drew a border around the
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>