Topics

Old Way

• <table>s
• Not evil, but bad for accessibility and SEO

The CSS Box Model

• Considerations toggle
  • height and width
  • padding (top, right, bottom, left)
  • border (top, right, bottom, left)
  • margins (top, right, bottom, left)
• content/inner edge, padding edge, border edge, margin/outer edge
• Measurements toggle
  • in pixels, px
  • in ems, em
  • 0
• Box properties toggle
  • width, min-width, max-width
  • height, min-height, max-height
  • padding (one, two, four argument versions), padding-top, padding-right, padding-bottom, padding-left
  • border (one, two, four argument versions), border-top-width, border-right-width, border-bottom-width, border-left-width
  • margin (one, two, four argument versions), margin-top, margin-right, margin-bottom, margin-left
• Width issues with auto toggle
  • static or relatively positioned? consider containing block
  • floated or absolutely positioned? consider contents
  • prefer auto to 100%
• Collapsing margins toggle
  • Adjacent elements, positive margins: larger margin is used, other becomes 0
  • Adjacent elements, one is negative: add margins
  • Nested elements, with no padding or border between: larger margin is used, other becomes 0

Formatting Concepts

• Properties and values toggle
  • display: block, inline, none
  • position: static, relative, absolute, fixed
  • float: none, left, right
• Block formatting toggle
  • Blocks are laid out vertically, starting at top.
  • A principal block contains either block boxes or inline boxes, not both.
• Inline formatting toggle
  • Boxes are laid out horizontally.
  • Horizontal box values are observed, vertical margins ignored.
  • Width and height settings are ignored.
  • Inline boxes are split when necessary.

p#motto {
  margin: 10px;
  border-width: 1px 2px;
  padding: 3px 4px 5px 6px;
  width: 20px;
  background-color: #FF00AA;
  color: rgb(10, 128, 255);
}