The CSS Box Model:
Note: Box Model diagram from Teach Yourself CSS in 24 hours, by Kynn Bartlett
The main components/properties of the CSS Box Model are:
- Margin
- Border
- Padding
- and, of course: Content
The MARGIN Property:
- Is ALWAYS Transparent - and the same color as the background.
- Margins dictate how far from other "boxes" that particular box is.
- Margin values can be dictated in em's(em) or Pixels (px)
- Only Vertical margins are collapsing.
- The size of the Margin is measured in either pixels (px), or em's (em).
- There is a "margin-top", "margin-right", "margin-bottom", "margin-left" property, as well as a generic "margin" (all margins the same) property.
The BORDER Property:
- Draws a border around the block element.
- All boxes have borders, the default is 0 ems (none visible).
- Borders have three (3) properties: 1) Size, 2) Style, 3) Color
- Border Size can be:
- Style of border can be: 1) Dotted, 2) Dashed, 3) Solid, 4) Double, 5) Groove, 6) Ridge, 7) Inset, 8) Outset.
- There is a "border-top-style", "border-right-style", "border-bottom-style", "border-left-style" property, as well as a generic "border-style" property.
The PADDING Property:
- Padding is the space surrounding the content of the box.
- Padding is always the same color as the background color of the content.
- Padding can be measured in em's (em) or Pixels (px).
- There is a "padding-top", "padding-right", "padding-bottom", "padding-left" property, as well as a generic "padding" (all padding the same) property.
Ok, now for some examples of how to use the CSS Box style element.....
This is an h3 tag styled with Linked Style Sheet CSS Box Style 1: Margin= 5px, Border= solid, Padding= 5px
This is an h3 tag styled with Linked Style Sheet CSS Box Style 2: Margin= 10px, Border= double, Padding= 20px
This is an h3 tag styled with Linked Style Sheet CSS Box Style 3: Margin= 20px, Border= dashed, Padding= 40px
This is blah-blah-blah content, but the < p > tag "block" is formatted with a css block style class type that I defined as cssboxstyle2 in the externally linked css document. Note: As CSSBoxStyle2 was defined as an CLASS (.), it can be re-used multiple times in the web document...
Just some more verbage to prove that CLASSES are Re-USABLE, (( ID's are not)) .. Mnemonic: CLASS can be used always - period.
Resources Used in this Project:
- "Teach Yourself CSS in 24 Hours", by Kynn Bartlett.
- W3 Schools - Box Model Section.
- Note: Apologies for the visual "eye-sore" of this webpage...
