##The Box Model
- every element on a web page is a box of content wrapped in three outer layers
- margin: outermost layer, this is transparent and used for spacing
- border: middle layer, this is a visible, styleable rectangular border
- padding: inner layer, this is transparent but colored by the
background-colorof an element; it is used to create spacing between the border of an element and its inner content - You can individually style each rectangular side of
margin,borderorpadding - You can change how an element's width/height is calculated in relation to its box model using the
box-sizingproperty - You can view a representation of the box model of any element in Chrome Dev Tools
- You round the corners of your rectangular
borderwith theborder-radiusproperty