The Box Model

Module 5

http://www.lipsum.com/

The Box Model

Sed pharetra lobortis leo, eu aliquam nulla dictum

gravida. Nullam gravida sem id justo pharetra in
lacinia dolor cursus. Pellentesque porttitor, libero eget
interdum commodo, mi magna fermentum nibh, ac
ornare sem nulla non nisi. Ut id magna lorem. In nulla
quam, pretium quis hendrerit in, semper nec ipsum.
Fusce enim nisi, pretium a scelerisque et, lacinia in
tortor. Donec ac risus orci. Ut ut dui venenatis lacus
ultricies lobortis vel ornare ligula.

http://www.w3.org/TR/CSS2/box.html#box-dimensions

Paddin
g
Border
Margin

The Box Model

Content
These two areas are
text in the container
affected by
background color
Padding
area b/w the border of the container and the content
Border
edge of the containers
solid dashed, dotted
Margin
the empty space bw the container element and
adjacent
elements
always transparent

Normal Flow

Browser display of elements in the order they are coded

Boxes can be nested

Box Model Practice

The CSS border Property

Configures a border on the top, right, bottom, and left

sides of an element
<hr /> is an ________

border-width
border-style
border-color

hr is an element

border is a property

Border is a ________

h2 { border: 2px solid #ff0000; }

Configuring Specific Sides of a Border

Use CSS to configure a line on one or more sides of an

element
border-bottom
border-left
border-right
border-top
h2 { border-bottom: 2px solid #ff0000; }

CSS Borders: Block / Inline Elements

Borders behave differently depending on the element:

Block element
default width of element extends to browser margin (or
specified width)
begin on a new line

The heading is a block element

Inline element
Border closely outlines the element content

An

anchor is an inline element

Background
border

Browser Display Can Vary

Always test in multiple
browsers things dont look
the same in every browser!

http://border-radius.
com/

CSS padding Property

Configures ______________

Default value is 0px

h2 { border: 2px solid #f00;

padding: 5px; }

CSS padding Property

padding-bottom
padding-left
padding-right
padding-top

h2 { border: 2px solid #f00;

background-color: #ccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;}

padding shorthand: two values

Two numeric values or percentages

first value configures top and bottom padding
the second value configures left and right padding

h2 { border: 2px solid #f00;

background-color: #ccc;
padding: 20px 10px;}

padding shorthand: four values

Four numeric values or percentages

Configure top, right, bottom, and left padding

h2 { border: 2px solid #f00;

width: 250px;
background-color: #ccc;
padding: 30px 10px 5px 20px;}

CSS margin Property

margin-bottom
margin-left
margin-right
margin-top

Margin uses the same shortcut rules as

padding (2 or 4 values)

CSS box-sizing Property

Box-sizing helps control the actual

size of the box, including padding and
border
Margin would be added

*, *:before, *:after {
box-sizing: border-box; }

In Practice pp 68-72
https://css-tricks.com/box-sizing/

Centering Page Content with margins

#container { margin-left: auto;
margin-right: auto;
width:70%; }

Positioning

Relative
Absolute
Float

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Relative Positioning

h1 { background-color:#ccc;
padding:5px;
color: #000;
}
#myContent { position: relative;
left:30px;
font-family: Arial,sans-serif;
}

Changes the
location of an
element in is
positioned
relative to its
normal position

Absolute Positioning
Precisely specifies the location of an element in
the browser window

h1 { background-color:#ccc;
padding:5px;
color: #000;
}
#content {position: absolute;
left:200px;
top:100px;
font-family:Arial,sans-serif;
width:300px;
}

Combining Relative and Absolute Positioning

Maec enas aliquet
varius posuere.
Aenean at dui nunc.
Prae sent malesuada,
lectus sed faucibus
ullam corper, mauris
justo adipiscing erat,
a dapibus dui augue
sed turpis. Donec id
augue sit amet tortor
sagittis porta vel quis
lorem. Proin pharetra
lorem risus, sed

#tiger_section {
position: relative;
top: 50px;
}
#tiger_rock{
position: absolute;
top:15px;
right: 15px;
}

Control elements
absolutely in relation to
their parent element.

Float Property

Float Property

Elements seem to float"

on one side of either the
window or another
element.
h1 { background-color:#ccc;
padding:5px;
color: #000;}
p { font-family:Arial,sans-serif;}
#yls {float:right;
margin: 0 0 5px 5px;
border: solid;}

Float Property

Always 2 parts
float: left;
width: 100px;

float:left or float:right no center

Element will float as far left or right as

possible within its containing box

http://css.maxdesign.com.au/floatutorial/

Clear Property

End the float for the next

element.
#footer {clear: both;}

CSS for Page Layout & Formatting

Except for imagelogo, all elements
on this page follow normal flow

CSS for Page Layout & Formatting

CSS for Page Layout & Formatting

wrapper contains the two

columns sets default
background color
left-column navigation
float: left
width100px
right-columcongtect
margin-left 100px
floatright (flower photo)
flaot right;

CSS for Page Layout & Formatting

CSS Debugging Tips

Manually check syntax errors

Use Developer Tools in the browser
Configure temporary background colors
Configure temporary borders
Use comments