The CSS Box Model

CSS Box Model

The primary rules to commit to memory about the CSS box model:

  • Block level elements
    • Take up the height of their content, plus any margin, padding, or border.
    • Take up the full width of their parent's content box.
    • Can have an explicit width or height, in which case the above are ignored.
    • Appear on their own "line", i.e. no other elements may appear beside them.
  • Inline level elements
    • Cannot have height or width set on them
    • Take up the height of their line-height, regardless of any margin, padding, or border.
    • Take up the width of their content, plus any margin, padding, or border.
    • Appear next to any other inline content.

http://learnlayout.com/ outlines a number of things, however here are some general takeaways from the site (and lecture):

  1. There is something called the Box Model. Every element has a Box with

    1. width and height (content),
    2. padding,
    3. border,
    4. and margin.

  2. EVERY element has a default style, given to it by a default stylesheet. EVERY browser has a default stylesheet.

  3. There are a few main CSS attributes that influence layout:

    • position
    • display
    • width and height
    • padding
    • border

    • margin

      Everything else in CSS simply colors, changes fonts, font sizes, background images, etc.

  4. All elements have a position, which is one of the four following values:

    1. static
    2. relative
    3. absolute

    4. fixed

      Any element with static or relative is considered having LAYOUT. This means they affect where other items are rendered. The other position values create a new layer. If an element is either of these, it is rendered above (on a new, 3d layer) and may cover up text or elements beneath it.

  5. All elements have a display, which is one of the following values:

    1. inline
    2. inline-block
    3. block
    4. table
    5. inline-table
    6. table-cell
    7. table-caption
    8. table-column
    9. table-row
    10. flex

    11. inline-flex

      The most common display types are inline, inline-block, and block. We will only be focusing on these (for now).

    12. inline elements flow with text. They typically have only text in them that gives them width and height. Typical inline elements: span, strong, em, i, b. The default display type for img tags is also inline.

    13. block elements create vertical sections. Anything before them in the HTML is rendered on top, anything after them in the HTML is rendered beneath.
    14. inline-block has the same layout properties of inline, however it can have padding, border, and margin.

Additional Resources