Frontend Logs: html/css Key Notes

# Study notes

The difference between margin and padding

Position is their biggest difference
margin is the outer spacing; it can be negative. Also called "fill"
padding is the inner spacing. Also called "blank edge"

What is the box model

The box model is how an element is handled, made up of the border, margin (outer spacing), padding (inner spacing), and the element's content.

Why use em instead of px to define font size

So text can be resized in Internet Explorer
em lets you change text size in every browser; px doesn't in some browsers
px is the unit for adjusting spacing

For h1 {margin : 10px 0px 15px 5px;}, what are margin-top, margin-right, margin-left, and margin-bottom?

They go in clockwise order

• top 10px

• right 0px

• bottom 15px

• left 5px

# extra

• If the left margin value is missing, the right margin value is used.

• If the bottom margin value is missing, the top margin value is used.

• If the right margin value is missing, the top margin value is used.