Box Model

Description #

The Box Model is used to represent what surrounds every element of your HTML page. The Box Model contains the content, padding, border, and margin of each element. In order to get the proper layout of your page and all the elements, you will need to know about the Box Model.

Where this knowledge is utilized #

• WDD 130
• WDD 230
• WDD 330
• WDD 430
• CSE 340

Resources #

• MDN CSS Box Model

• MDN CSS Backgrounds and Borders

• MDN box-sizing

Prepare #

The following video introduces the box model with content, padding, border, margin, and box-sizing.

The Box Model #

• Understanding the Box Model

Ponder #

• Practice with the Box Model