|CSS| CSS: The Box Model

          -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.