s1eepercat
10/10/2019 - 12:09 PM

DISPLAY

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