COM271, Week 4
The Box Model
Styling with content, padding, borders, and margins
Syllabus | Table of Pages | Assignments | References and Useful Links
Page layout really only begins to make sense when you fully understand "the box model" (and, later, positioning).
Here is the "picture worth 1000 words":
Text content
—margin region—
—border—
—padding region—
The box model controls the space surrounding block content. Content is within a border; between content and border is padding and outside of the border is margin.
Padding: Space between content and border depends on the attribute padding. Padding may be further qualified as padding-top, padding-right, padding-bottom, or padding-left. Units include all lengths and relative measures.
{padding-left:15px;padding-top:3em;padding-right:10%;padding-bottom:0;}
Padding may also use a shorthand, with 1 to 4 values following a generic pattern, {padding:top right bottom left} (remember "T-R-ou-B-L-e"):
- padding:10px 25px 5px 2em [Read as "10px top, 25px right, 5px bottom, 2em left"]
The shorthand can be further shortened; missing values assume the values that remain, like this:
- padding:10px 25px 5px [This means "10px top, 25px right, 5px bottom, same as right"]
- padding:10px 25px [i.e., "10px top, 25px right, same as top, same as right"]
- padding:10px [Again, read as "10px top, same as top, same as top, same as top"]
Margin: Space outside of the border depends on the attribute margin. It can be qualified and shortened in precisely the same fashion as padding, above. It can take all units of length or relative space.
Border: Border includes attributes border-thickness, border-style, and border-color. It can be further qualified for side, as border-right-style, border-bottom-color.
Fortunately, border can be compressed, using the generic {border: <size>, <style>, <color>}
{border:1px solid #ccc;}
{border-bottom:7px groove red;border-left:7px groove red;padding:3px;}
Border styles include the following. Note that some borders must be thick to render (groove). Others (inset, outset) may be rendered differently on different browsers. If you want to be completely certain that an inset or outset effect will use the colors you want on all browsers, use solid colors assigned to each individual border.
{border:1px dotted #cc6;} |
{border:1px dashed #cc6;} |
{border:7px double #cc6;} |
{border:7px groove #cc6;} |
{border:5px ridge #cc6;} |
{border:2px solid #cc6;} |
{border:7px outset #f63;} |
{border:7px inset #f63;} |