The Box Model

1
The Box Model

• Week 7 - Presentation 2
• Veronica Noone

2
Objectives

• The Box Model
• Padding the Content
• Bordering the Content
• Margins
• The Display Property

3
The Box Model
You can set all at once or use individual
sizes Margin 10px Margin-top 10px
4
The Content Box

• Can set width and height not to include padding,
  border or margin
• What does that mean?
• Allows you to set an overflow property
• visible
• hidden
• scroll
• auto

5
Padding the Content

• padding-top 25px
• padding-right10px
• padding-bottom25px
• padding-left10px

• Or
• padding 25px
• Or
• padding 25px 10px
• Or
• padding 10px 5px 0 25px

6
Bordering the Content

• Tons of options and syntax rules!
• width
• Solid, dotted, dashed
• color

border 5px solid f00 border-top 2px dashed
00f
7
Margins outside the Border

• Transparent outer wrapping of the box.
• Specify just like padding
• So what would this do...
• margin25px 5px

8
Lets Play

• Check out the sample box model page.
• Change some properties

9
The Display Property

• Allows you to have control over your pages
  without compromising the markup. Why?
• Common values
• block
• inline
• none

10
Try It!

• Make an inline element block
• A block an inline
• Make an element disappear using none.