CSS : Properties (1) (uint, width, height, margin, padding)

css unit

px : pixels
% : relative percentage

em : font size of the element

Default HTML font size = 16px
html {
	font-size: 16px;
}
width: 10em = 160 px

rem : font size of root element

vw : percentage of viewport width

vh : percentage of viewport vertical width

 

width, height

horizontal/vertical width of the element

- auto: browser calculates the width
- Specify in units such as px, em, vw, etc.

 

max-width, max-height

Maximum horizontal/vertical width an element can grow to

- none: no maximum width limit
- Specify in units such as px, em, vw, etc.

 

min-width, min-height

Minimum horizontal/vertical width an element can become smaller

- 0 : No minimum width limit
- Specify in units such as px, em, vw, etc.

 

margin

A 'shorthand attribute' that specifies the 'outside margin' of an element

- 0 : no outer margin
- Browser calculates margins
- Designate in units such as px, em, vw, etc.
- Negative number allowed

margin: 10px;
// top, right, bottom, left

margin: 10px 20px;
// top, bottom / left, right

margin: 10px 20px 30px;
// top / left, right / bottom

margin: 10px 20px 30px 40px;
// top / right / bottom / left

 

padding

A 'shorthand attribute' that specifies the 'inner padding' of an element

- 0 : no inner margin
- Specify in units such as px, em, vw, etc.
- %: specified as a percentage of the horizontal width of the parent element

padding: 10px;
// top, right, bottom, left

padding: 10px 20px;
// top, bottom / left, right

padding: 10px 20px 30px;
// top / left, right / bottom

padding: 10px 20px 30px 40px;
// top / right / bottom / left