Margins & Padding - Height & Width

Margins

Margins create space on the outside of an element's border (padding is on the inside)

margin: 20px;

10px margin

10px padding

without borders these would look the same

units

margins can have the following units: auto, length (px, pt, cm ...), %, and inherit (same as parent element)

auto will horizonally center the element within its container

margin: auto;

a width must be set for this to work

these values can even be negative:

-20px margin

Side Margins

Each side can have its own margin

margin-top: 10px;

top, bottom, right, and left specify the sides

Shorthand

margin: top right bottom left;

margin: 20px 40px 60px 80px;

this also works for three or two values

three - margin: top sides bottom;

two - margin: top/bottom sides;

margin: 10px 40px 20px;

margin: 10px 30px;

Margin Collapse

two elements (one on a new line) may end up combining the margins between them

if one element has a 50px margin and the other has a 30px margin, instead of having 80px space between them, they may have only 50px space between them

(did not give a way to change this)

Padding

Padding creates space on the inside of an elements border (margins are on the outside)

10px padding

10px margin

auto and negative values do not affect padding

Side Padding

each side can have its own padding

padding-top: 10px;

top, bottom, right, and left specify the sides

Shorthand

padding: top right bottom left;

padding: 20px 40px 60px 80px;

this also works for three or two values

three - padding: top sides bottom;

two - padding: top/bottom sides;

padding: 10px 40px 20px;

padding: 10px 30px;

Width

the width of an element can be set, yet it may not be the "actual" width of the element

width: 300px;

200px width

200 px width with 20px padding

the second box would be 240 px wide if it weren't for the box-sizing: border-box; in the stylesheet

Height and Width

the height and width of an element can be set

height: 50px;

width: 50px;

width: 300px; height: 50px;

percentages can also be used to make the element proportional to the screen

width: 50%;

height: 50%;

note that this can only be used for width

Max and Min

max-width can be used to make an element proportional to the screen up until a certain measurement

max-width: 600px;

min-width can be used similarly

min-width: 400px;

Both can be used!

min-width: 400px; max-width: 600px;

max-width and auto margin:

max-width:200px; margin:auto;

this allows a block element styled so that its width is not 100% of its parent element, and still be centered

max allows the element width to shrink with the screen size so no scroll bar is needed

CSS Box Model

a model used to illustrated the space around every HTML element

margin
border
padding
content

example:

margin: 10px;
border: 2px;
padding: 20px;

height and width do not include padding or margins unless box-sizing: border-box; is used

without that property the actual height and width would be the total of the content, margin, padding, and border