Difficulty: Moderately Easy
Things You’ll Need:
- A text editor or HTML editor
- A web page
Step1
The box model illustrated
Each element has a box around it. Each box has a content area and optional surrounding padding, border and margin areas.
Step2
Padding and margin are transparent, allowing the background or background image to show through.
Step3
Values for padding, border and margin can be defined collectively for each property, or individually for each property on the box top, right, bottom and left.
Step4
The W3C specifications define the box width as "the sum of the left and right margins, border, padding, and the content width." The box height is defined as "the sum of the top and bottom margins, border, padding and the content height."
Study this example:
div {
width: 100px;
padding: 10px;
border: 5px;
margin: 10px;
}
Step5
Find width for the example in Step 4 by adding it all up. (margin-left) 10px + (border-left) 5px + (padding-left) 10px + (content) 100px + (padding-right) 10px + (border-right) 5px + (margin-right) 10px = 150 px.
Step6
Use the same process to determine an element's height.