display: block
1. it's content takes 100% of parents width
display: inline
1. no line breaks, takes as much width as content needs
2. no heights and widths
3. padding works only to left and right
display: inline-block
1. mix of both
2. takes only contents space
3. no line breaks
4. box model applies as showed. Like a block
MAIN DIFF BETWEEN INLINE AND INLINE-BLOCK:
INLINE BLOCK ALLOWS US TO CHANGE WIDTH AND HEIGHT, ALSO RESPECTS TOP AND BOTTOM PADDINGS AND MARGINS