Learning Box Model

All of this is done in style.css
Height and Width:

• p { height: 80px; width: 240px; }

Borders:

• can be set with a specific width, style, and color
• p {border: 3px solid coral;}
• Modify corners of an element box with the Border-Radius property.

Padding:

• Between the contents and the border
• p.content-header {border: 3px solid coral; padding: 10px;}
• padding-top (bottom, left, right)
• padding shorthand lets you modify all in a single line
• Padding 4 values: 6px 11px 4px 9x; clockwise rotation
• padding 3 values: top, left & right, bottom
• padding 2 values: top & bottom, left & right

Margins:

• space directly outside box.
• p { border: 1px solid aquamarine; margin: 20px;} -Margin 4 values: clockwise -Margin 3 values: top, L & R, bottom -Margin 2 values: top & bottom, L & R
• auto value instructs the browser to adjust left and right margins until the element is centered with itself.

Overflow

• controls what happens to content that spills outside the box.
• Hidden: overflow will be hidden from view
• scroll: scrollbar would be added to view
• visible: displayed outside of containing element

Visibility:

• elements can be hidden from view with this property
• hidden: hides an element
• visible: displays an element
• collapse: collapses an element

The box model: