Section 8, CSS Box Model

• Display Property

  • Inline: span, … .Width & height are ignored. Margin & padding push elements away horizontally but not vertically.
  • Block: h, … . Block elements break the flow of a document. Width, height, margin & padding are respected.
  • Inline-block: Behaved like an inline element except width, height, margin, pading are respected.
  • none: 그냥 안보임

• Changing Display

h1 {
		display: inline;
}

span {
		display: block;
}

• Relative units (Absolute: px)

  • Percentage
  • EM: With font-size, 1em equals the font-size of the parent. 2em’s is twice the font-size of the parent, etc.
    With other properties, 1em is equal to the computed font-size of the element itself.
    But nested elements can grow or shrink as they get to deeper steps.
  • REM: Relative to the root html element’s font-size. Often easier to work with.
    If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px, etc.