-Box Model: Width and Height
-Box Model: Border and Border-Radius
-Box-Model: Padding
-Box-Model: Margin
-The Display Property
-CSS Units Revisited
-CSS Units: ems
-CSS Units: rems
Box Model: Width and Height
Everything in CSS is a box. Those boxes have different properties. The browser treats everything on a web page as a box, even though the item may not look like a box.
The width of the CSS property sets an elements width.
The height of the CSS property sets an elements height.
div {
width: 200px;
height: 200px;
}
Box Model: Border and Border-Radius
Borders are important because they can make clear what certain things do, or bring attention to certain elements. Borders can change when they are interacted with.
Border Properties
Border-width
Controls the thickness of the border
Border-Color
Controls the color of the border
Border-Style
Controls the line style - dashed, solid
Box-Model: Padding
Padding Properties
Individual properties
Padding-Left
Padding-Right
Padding-Bottom
Padding-Top
shorthand properties is where you can set all four
sides at once.
Box-Model: Margin
Margin is on the outside and is the space between the elements while padding is between the border on the inside of an element and its content area.
The Display Property
Inline
Width and height are ignored. Margin and padding push elements away horizontally but not vertically.
Block
Block elements break the flow of a document. Width, Height, Margin and Padding are respected.
Inline-Block
Behaved like an inline element except Width, Height, Margin and Padding are respected.
CSS Units Revisited
Relative Units
-em
-rem
-vh
-vw
-% percentages are always relative to some other value.
Absolute Units
-px
-pt
-cm
-in
-mm
CSS Units: ems
em's are relative units with font-size, 1em equals the font-size of the parent. 2em's is twitch the font-size of the parent.
CSS Units: rems
rem is relevant to the root html element's font-size. Often easier to work with.
If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px.
Top comments (1)
This is great review
I forgot about some of this stuff
But also I dont think I ever heard of the relative units other than percentages