What is the difference between inline, inline-block, block, and flex display properties in CSS?

In CSS, the display property is a fundamental attribute that defines how elements are rendered on a web page. Different display values determine the layout and behaviour of elements, such as how they flow within their containers and interact with other elements. Understanding the differences between the inline, inline-block, block, and flex display properties is essential for creating well-structured and visually appealing web layouts. In this comprehensive guide, we will explore each display property and its respective characteristics, use cases, and practical examples to illustrate their behaviour.

1. Inline Display

1.1. What is inline?

The display: inline property renders an element as an inline-level box. Inline elements flow within the text content, allowing other inline elements to appear on the same line. These elements do not create line breaks before or after them, and their dimensions are determined by their content.

1.2. Characteristics of inline Elements

• Doesn’t Affect Line Breaks: Inline elements do not create line breaks before or after them, allowing them to appear on the same line as adjacent inline elements.
• Ignores Width and Height: Inline elements have their width and height determined by their content. Setting explicit width and height values will not affect them.
• Margins and Paddings: Margins and paddings can be applied horizontally (left and right) but not vertically (top and bottom).
• No Newline Characters: Inline elements do not generate any newline characters in the markup, making them suitable for elements like <a> or <span>.

1.3. Practical Example of inline

<span style="background-color: #007bff; color: #fff; padding: 5px;">Inline Element</span>
<span style="background-color: #ff0000; color: #fff; padding: 5px;">Next Inline Element</span>

In this example, the two <span> elements will be displayed on the same line, thanks to the inline display property.

2. Inline-Block Display

2.1. What is inline-block?

The display: inline-block property combines characteristics of both inline and block elements. It allows an element to flow with the text content like an inline element but also allows the application of block-level styles, such as setting explicit width and height.

2.2. Characteristics of inline-block Elements

• Flow with Text Content: inline-block elements flow with the text content, allowing other inline elements to appear on the same line.
• Width and Height: Unlike inline elements, inline-block elements can have explicit width and height values.
• Margins and Paddings: Margins and paddings can be applied both horizontally and vertically.
• Respects Line Height: inline-block elements respect the line height set on the parent element, which can affect vertical alignment.

2.3. Practical Example of inline-block

<div style="display: inline-block; width: 100px; height: 100px; background-color: #007bff;"></div>
<div style="display: inline-block; width: 150px; height: 150px; background-color: #ff0000;"></div>

In this example, the two <div> elements will appear on the same line due to the inline-block display property. They also have explicit width and height values, making them block-like in appearance.

3. Block Display

3.1. What is block?

The display: block property renders an element as a block-level box. Block elements create line breaks before and after them, forcing subsequent content to appear on a new line. These elements take up the full width of their parent container and stack vertically.

3.2. Characteristics of block Elements

• Line Breaks: Block elements create line breaks before and after them, forcing adjacent content to appear on a new line.
• Full Width: Block elements take up the full width of their parent container unless explicitly sized otherwise.
• Width and Height: Block elements can have explicit width and height values.
• Margins and Paddings: Margins and paddings can be applied to all four sides.

3.3. Practical Example of block

<div style="display: block; width: 200px; height: 100px; background-color: #007bff;"></div>
<div style="display: block; width: 300px; height: 150px; background-color: #ff0000;"></div>

In this example, the two <div> elements will appear on separate lines due to the block display property. They also have explicit width and height values, taking up the full width of their parent container.

4. Flex Display

4.1. What is flex?

The display: flex property creates a flex container, which allows its child elements to become flexible items within the container. Flexbox is a powerful layout model that simplifies complex layout designs, distributing space and aligning items with great flexibility.

4.2. Characteristics of flex Elements

• Flex Container: The parent element with display: flex becomes a flex container, containing flex items.
• Flex Items: The child elements of a flex container become flex items.
• Flex Direction: The flex-direction property allows you to control the direction of the main axis (horizontal or vertical).
• Justify Content and Align Items: Flexbox provides properties like justify-content and align-items to control the alignment of flex items within the container.

4.3. Practical Example of flex

<div style="display: flex; justify-content: space-between;">
  <div style="background-color: #007bff; width: 100px; height: 100px;"></div>
  <div style="background-color: #ff0000; width: 150px; height: 150px;"></div>
</div>

In this example, the two <div> elements are flex items within the flex container. The justify-content: space-between property aligns the items with equal space between them, horizontally.

5. Conclusion

Understanding the differences between inline, inline-block, block, and flex display properties are essential for creating well-structured and visually appealing web layouts. Each display property has unique characteristics and uses cases, allowing developers to create flexible and responsive designs.

Choose the appropriate display value based on the behaviour you want to achieve for your elements. For simple text-level elements, use inline, for elements with specific dimensions, use inline-block, and for elements that need to stack vertically or create line breaks, use block. For more advanced layout designs and aligning items within a container, use the powerful flex display property.

By mastering the various display values in CSS, you can build visually stunning and well-organised web layouts, enhancing the user experience and usability of your web pages. Experiment with different display values and combine them with other CSS properties to achieve the desired visual effects and responsive behaviour for your web projects.