CSS box model demo

All divs on this page have a width and height set to 200px in CSS.

▶ Change their box-sizing property to border-box.

▶ Reset their box-sizing property to content-box (the default).

←200px→

The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . . The blue div has padding . . . . . . . .

The red div has no padding, border, or margin.

The green div has padding and border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The green div has padding and border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The green div has padding and border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The green div has padding and border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The green div has padding and border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The green div has padding and border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The red div has no padding, border, or margin.

The yellow div has padding, border, and margin . . . . . . . . . . . . . . . . . . . . . . . . . . The yellow div has padding, border, and margin . . . . . . . . . . . . . . . . . . . . . . . . . . The yellow div has padding, border, and margin . . . . . . . . . . . . . . . . . . . . . . . . . . The yellow div has padding, border, and margin . . . . . . . . . . . . . . . . . . . . . . . . . . The yellow div has padding, border, and margin . . . . . . . . . . . . . . . . . . . . . . . . . . The yellow div has padding, border, and margin . . . . . . . . . . . . . . . . . . . . . . . . . .

The red div has no padding, border, or margin.