the box model
every element in web design
is a rectangular box
True fact.
The Box
what's in the box?
4 parts
- Content
- Padding
- Border
- Margin
content
content is the small box
in the middle
padding
padding is the bubble wrap
around the content
border
border is the big outer box
margin
margin is the space directly
around the outer box
calculating the size of any box
box width equals
- Border-Left
- Padding-Left
- Width
- Padding-Right
- Border-Right
BOX height EQUALS
- Border-Top
- Padding-Top
- Height
- Padding-Bottom
- Border-Bottom
questions
- What about margin?
- What's with the -left, -right, -top, -bottom?
answers
- Margin is only the space around the box
- Margin in no way specifies a box's dimensions
more answers
- Border, Padding and Margin may have
different values for each side
- width
- height
- padding-top
- padding-right
- padding-bottom
- padding-left
-
border-top
- border-right
- border-bottom
- border-left
- margin-top
- margin-right
- margin-bottom
- margin-left
top
left right
bottom
Write this down. We will come back to this.
exercise
Recreate the box represented in the diagram below.
