block & inline
block, inline and inline-block are display models that define how HTML elements are arranged and occupy space on the page, controlling their flow, alignment, and dimensions.
block
- They start on a new line.
- By default, they occupy all available width.
- They allow defining width, height, margin, padding without issues.
- They are ideal when you need elements to stack vertically and want to control size and spacing.
HTML elements that are block by default:
<div><p><h1>...<h6><section><header><footer><main><aside><nav><ul><ol><li><form><table><blockquote>
Example
In this example we have a container that contains three children with the class child set as display block, where each child occupies the full possible width of the container because they do not have a fixed width.
The class child would not need to be explicitly set as display block since by default, div elements are block (this is done for teaching purposes).
inline
- They do not start on a new line and only occupy the necessary width.
- They can be nested inside block or inline elements.
- They do not allow box properties like width, height, margin-top, margin-bottom. Generally, you cannot set width or height, nor vertical margins. You can apply padding and horizontal margin.
- They can contain only text or other inline elements.
- They are ideal when you want content to flow inside a paragraph.
HTML elements that are inline by default:
<a><abbr><b><bdo><br><cite><code><dfn><em><i><kbd><label><map><mark><output><q><ruby><rp><rt><s><samp><small><span><strong><sub><time><u><var><wbr>
Example
In this example we have a container that contains three children with the class child set as display inline, where each child only occupies the necessary width of the container. We can see how the container’s padding does not adjust to the height of its children when they are inline elements.
The class child would not need to be explicitly set as display inline since by default, span elements are inline (this is done for teaching purposes).
inline-block
- They flow inline like inline elements but allow box dimensions like block elements.
- They align horizontally with other inline or inline-block elements.
- They do accept properties like width, height, padding, and margin (both vertical and horizontal).
- They do not start on a new line but respect their own size within the inline flow.
- They are ideal for small components like buttons, cards, or boxes that need to align horizontally but at the same time behave like a block.
HTML elements that are inline-block by default:
<button><input><select><textarea><img><iframe><canvas><video><audio><embed><object><meter><progress><svg><math>
Example
In this example we have a container that contains three children with the class child set as display inline-block, where each child occupies the width and height set in its configuration. We can see how the container adjusts to the height of its children, unlike elements set as inline.