Box Examples

To begin, we will examine two <article> elements below by exploring their properties. You will learn how the box model can be rendered with both CSS2 and CSS3.

null

CSS2 Standard Box Model

Standard rendering properties that work in CSS2

  • Width: 50%
  • Padding Total: 20% (10% on all sides)
  • Border: 4px (2 + 2)
  • Margin: top/bottom 30px, left/right "auto"
Chrome's and Firefox's Box Model Inspectors

TIP: Right-click the padding area of these boxes to "inspect the element" in Google Chrome or Firefox. Find the box model visual tool and hover over it to see the element's properties highlighted in the viewport display.

null

CSS3 Box Model Option

Using "box-sizing" property in modern browsers

  • Width: 50%
  • Padding Total: 20% (10% on all sides)
  • Border: 4px (2 + 2)
  • Margin: top/bottom 30px, left/right "auto"
  • Box-sizing: "border-box"

The CSS3 box-sizing property renders the element so that all proprties up to the "border" are calculated to fit within the 50% element width.