The Box Model

The first concept concerns what has come to be known as "the box model". Browsers reads HTML code, interpret its structure and formatting, and then display the webpage. CSS does its work by stepping between HTML and the browser, redefining how each element should be rendered. It imposes an imaginary box around each element and then enables you to format almost every aspect of how that box and its contents are displayed.

CSS permits you to specify fonts, line spacing, colors, borders, background shading and graphics, margins, and padding, among other things. In most instances these boxes are invisible, and although CSS gives you the ability to format them, it does not require you to do so.

CSS defines each HTML element into one of three basic categories: Block, inline or hidden.

Block elements by default:

  • Occupy the full width of the screen or their parent element, unless an alternative width is specified.
  • Stack on top of other block elements, regardless of their width.
  • Dimensions are calculated by adding up width, height, padding, borders and margins.
  • Will expand vertically to the height of its content, plus any padding.
  • Include div, h1-h6, p, li, among others.

Inline elements by default:

  • Appear within the body of another element
  • Are only as wide as its content.
  • Do not honor width or height specifications.
  • Do honor left and right padding and margin specifications.
  • Do not honor top and bottom padding or margin specifications.
  • Include span, em, strong among others.

Hidden elements by default

  • Do not appear in the browser
  • Take up no space
  • Do not affect the flow or appearance of other elements
  • Include head, meta, script, style among others.