1-07: The Box Model

The Box Model

Colin Gourlay & Kevin Vanderbeken

Today:

The Box Model

Container Elements

Other Text Features

introduction

an aside on tables...

the CSS layout model

a.k.a.

the box model

margin

outline

border

padding

content

HEGHT

WIDTH

more detail + code examples

margin

margin-top: 3px;margin-right: 5px;margin-bottom: 7px;margin-left: 2px;

...or...

margin: 3px 5px 7px 2px;

outline

outline-color: #999999;outline-style: dotted;outline-width: 5px;

...or...

outline: #999999 dotted 5px;

nonedotteddashedsoliddoublegrooveridgeinsetoutset

width & height

width: 200px;height: 120px;

border

border-color: #00FF00;border-style: dotted;border-width: 5px;

...or...

border: #00FF00 solid 5px;

nonedotteddashedsoliddoublegrooveridgeinsetoutset

...but wait, there’s more!...

border-top-width: 2px;border-right-width: 5px;border-bottom-width: 2px;border-left-width: 5px;

...and...

border-top: #00FF00 solid 2px;

padding

padding-top: 3px;padding-right: 5px;padding-bottom: 7px;padding-left: 2px;

...or...

padding: 3px 5px 7px 2px;

recap

margin

outline

border

padding

content

HEGHT

WIDTH

text featuresworth mentioning

line height

line-height: 24px;

text alignment

text-align: left;text-align: right;text-align: center;text-align: justify;

next week...

More on The Box ModelTM

Different boxes: block & inline

Box interaction: floats & positioning