HTMLEasy

What is the difference between block, inline and inline-block elements?

#html#css#layout

Answer

	Starts a new line	Honors width/height	Honors vertical margin/padding
`block` (`div`, `p`)	Yes	Yes	Yes
`inline` (`span`, `a`)	No	No	Horizontal only (vertical doesn't push layout)
`inline-block` (`button`, `img`)	No	Yes	Yes

css

.badge { display: inline-block; padding: 4px 8px; width: 80px; }

Note: display is a CSS property - any tag can change it; the defaults just come from the user-agent stylesheet.