Inline Element (ex: a tag, span tag)
Block level Element (ex: div tag)
You can switch each other.
{ display: inline }
{ display: block }
/* p is block model */
p { border:10px solid red;
padding:20px; /* distance of border line and content*/
margin:40px; /* distance of Elements */
width: 90px; /* this is only for block model */
}
{ box-sizing:border-box; } /* default is content-box*/
Share margin-bottom and margin-top area.
Bigger margin of top-element or bottom-element is the distance of two elements.
When parent element is transparent, They are overlaped.