TIL - CSS Box Model

Box-Model Properties

	display: block	display: inline	display: inline-block
default at	<h1> and <p>	<span> and <em>
width	width as the container	width as the inline Element
width & height properties	are respected.	width and height properties will not apply
Padding, margin and border	will cause other elements to be pushed away from the box	will apply. Vertical will not cause other inline boxes to move away from the box/ Horizontal will cause other inline boxes to move away from the box	causes the padding to be respected by other elements
centering stuff	block box with {margin: 20px auto; /* Vertical Horizontal */}	inline box with {text-align: center}

Tips

-> more on centering

get rid of the default white space in some browsers from margin/padding added by your browser.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Dev Tools

Chrome
Mozilla1, Mozilla2

first step