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

Understanding the distinction between `display: block` and `display: inline-block` is fundamental for effective CSS layout. These properties dictate how elements interact with their surroundings and how their box model behaves.

Block Elements (display: block)

Elements with display: block are designed to occupy the entire available width of their parent container. They always start on a new line, effectively pushing any subsequent content below them. Common HTML elements that are block-level by default include <div>, <p>, <h1> to <h6>, <ul>, <ol>, and <li>.

Key characteristics of block elements:

• Takes full width: By default, they stretch to fill 100% of their parent's width, even if their content is small.
• Starts on a new line: Each block element will appear on its own line.
• Accepts width and height: You can explicitly set width, height, margin, and padding for block elements, and they will be respected.
• Vertical margins collapse: Adjacent vertical margins between block elements can collapse (the larger of the two margins will apply).

<div style="background-color: lightblue; margin: 10px; padding: 5px;">Block Element 1</div>
<div style="background-color: lightcoral; margin: 10px; padding: 5px;">Block Element 2</div>

Inline-Block Elements (display: inline-block)

Elements with display: inline-block combine characteristics of both block and inline elements. They flow horizontally like inline elements but behave like block elements in terms of accepting dimensions and margins/padding. There are no native HTML elements that are inline-block by default, but you can assign this property to any element.

Key characteristics of inline-block elements:

• Flows horizontally: They sit next to each other on the same line, as long as there is enough horizontal space.
• Does not start on a new line: Unlike block elements, they do not force a line break.
• Accepts width and height: You can set explicit width, height, margin, and padding, and these will be applied as they would for a block element.
• Vertical margins do not collapse: Vertical margins between inline-block elements are always respected and do not collapse.
• Affected by vertical-align: Because they are part of the inline flow, vertical-align can be used to control their vertical positioning relative to other inline elements on the same line.

<div style="display: inline-block; background-color: lightblue; width: 100px; height: 50px; margin: 10px; padding: 5px;">Inline-Block 1</div>
<div style="display: inline-block; background-color: lightcoral; width: 120px; height: 60px; margin: 10px; padding: 5px;">Inline-Block 2</div>

Summary of Differences