Intern / FresherHTML & CSS
What is the difference between inline, block and inline-block in CSS?
Quick answer
Block elements start on a new line and take the full available width; inline elements sit in the text flow and ignore width and height; inline-block sits in the flow but accepts width, height, padding and margin on all sides.
Headings, paragraphs and div are block by default. span, a and strong are inline: width, height and vertical margin do not apply the way you expect. inline-block is the middle ground used for buttons or icon-and-label pairs that should sit in a row but have a fixed size.
Today Flexbox or Grid usually replaces floats and long rows of inline-block, because inline-block still leaves gaps from the whitespace between tags. Use the display value that matches the layout job, not a habit.