1 07-the box-model
DESCRIPTION
TRANSCRIPT
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: 5px solid #00FF00;
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: 2px solid #00FF00;
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