CSS Display Property

Posted on In

The CSS display property.

CSS display

The CSS display property is an important tool for controlling the layout behavior of an element. It offers several common values that can greatly impact the visual presentation of a webpage.

Let’s take a closer look at some of the common values:

Inline

The display: inline; property value makes the element behave like an inline element. It allows other elements to be displayed on the same line. This is especially useful for creating text-like elements such as links or spans.

For example, consider the following HTML code:

1
<p>This is an <span style="color: lightblue;">inline element</span> of a paragraph.</p>

In this example, the <span> element will be displayed inline with other elements, such as text or other inline elements.

Any height and width CSS properties will have no effect on inline element.

1
<p>This is an <i style="color: lightblue; width: 20px; height: 30px;">inline element</i> of a paragraph.</p>

In this example, the width and height css property doesn’t change anything.

Some of the HTML elements with default inline display property are span, a, i, bold, img.

for img, you use attribute to set its width and height, not CSS property.

1
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="200px" />

Block

The display: block; property value makes the element behave like a block-level element. It takes up the entire width of its container and starts on a new line. This can be handy for creating large sections or containers within a webpage.

For example, consider the following HTML code:

1
2
3
4
<div style="background-color: lightgray; padding: 10px; width: 300px; height: 200px">
  <h2>This is a block-level element</h2>
  <p>This element will take up the entire width of its container and start on a new line.</p>
</div>

In this example, the <div> element will be displayed as a block-level element, with its own separate line and full width within the container.

You can change a block element’s width and height using CSS properties

1
2
3
4
<div style="background-color: lightgray; padding: 10px; width: 300px; height: 200px">
  <h2>This is a block-level element</h2>
  <p>This element will take up the entire width of its container and start on a new line.</p>
</div>

Some of the HTML elements with default block display property are div, p, h1, ul, header, nav, main , section, aside, footer.

Inline-Block

The display: inline-block; property value combines the characteristics of both inline and block. The element is displayed as an inline element, allowing other elements to be displayed on the same line. At the same time, it can have a width and height set, unlike traditional inline elements. This is useful for creating elements that need to flow with other elements on the same line but still have specific dimensions.

For example, consider the following HTML code:

1
2
3
4
5
6
7
<div style="background-color: lightblue; width: 100px; height: 50px; display: inline-block;">
  This is an inline-block element.
</div>
<div style="background-color: lightgreen; width: 100px; height: 50px; display: inline-block;">
  This is another inline-block element.
</div>

In this example, the two <div> elements will be displayed in the same line, thanks to the inline-block display property. They can also have specific width and height values, allowing for more control over their dimensions.

Some HTML elements with default inline-block display property are input and button.

For instance, you can use the following code to create an input field and a button next to each other:

1
2
<input type="text" style="display: inline-block; width: 200px; height: 30px;">
<button style="display: inline-block; width: 100px; height: 30px;">Submit</button>

none

The display: none; property value allows you to hide an element and remove it from the document flow. It is useful for conditionally showing or hiding elements based on events or user interactions. When an element is set to display: none;, it is not rendered on the page and does not take up space. It can be toggled using JavaScript or CSS.

1
2
3
<div style="display: none;">
  This is an example of the <code>display: none;</code> property value.
</div>

flex

The flex value of the display property is a powerful tool for creating flexible layouts in CSS. It enables a flexible box layout for the element and its children, allowing for easy manipulation of the layout in one dimension, either horizontally or vertically.

With the flex value, you can create responsive designs and align elements within a container. It provides a flexible and dynamic way to distribute available space among child elements, making it easier to achieve desired layout behaviors.

To use the flex value, you need to apply it to a container element by setting its display property to flex. Once the container becomes a flex container, its child elements become flex items, and you can control their layout and positioning using additional flex-related properties.

Some of the commonly used flex-related properties include:

  • flex-direction: Specifies the direction of the flex container’s main axis.
  • justify-content: Aligns flex items along the main axis.
  • align-items: Aligns flex items along the cross axis.
  • flex-wrap: Specifies whether flex items should wrap to multiple lines if there is not enough space.

Here is an example of using the flex value to create a simple flex container:

1
2
3
4
5
6
<div style="display: flex; background-color: #eee; justify-content: center; align-items: center; height: 200px;">
  <div style="background-color: lightblue; width: 100px; height: 100px;"></div>
  <div style="background-color: lightgreen; width: 100px; height: 100px;"></div>
  <div style="background-color: lightpink; width: 100px; height: 100px;"></div>
</div>

In this example, the outer <div> is set as a flex container using display: flex;. The justify-content property centers the flex items along the main axis (horizontally), and the align-items property centers them along the cross axis (vertically). The child <div> elements become flex items, and their dimensions can be controlled using CSS properties.

By using the flex value and the accompanying flex-related properties, you can create flexible and responsive layouts that adapt to different screen sizes and devices.

grid

The grid value of the display property is an incredibly powerful tool for creating grid layouts in CSS. It allows you to define a two-dimensional grid of columns and rows, and easily position and align elements within this grid.

With the grid value, you can create complex and flexible layouts, with precise control over the placement and sizing of elements. It is particularly useful for creating responsive designs, where elements can automatically rearrange themselves based on the available space.

To use the grid value, you need to apply it to a container element by setting its display property to grid. Once the container becomes a grid container, its child elements become grid items, and you can control their position and alignment using additional grid-related properties.

Some of the commonly used grid-related properties include:

  • grid-template-columns: Specifies the size and number of columns in the grid.
  • grid-template-rows: Specifies the size and number of rows in the grid.
  • grid-gap: Specifies the size of the gap between grid items.
  • grid-column: Specifies the start and end positions of a grid item along the horizontal axis.
  • grid-row: Specifies the start and end positions of a grid item along the vertical axis.
  • justify-items: Aligns grid items along the horizontal axis.
  • align-items: Aligns grid items along the vertical axis.

Here is an example of using the grid value to create a simple grid layout:

1
2
3
4
5
6
7
8
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;">
  <div style="background-color: lightblue;">Item 1</div>
  <div style="background-color: lightgreen;">Item 2</div>
  <div style="background-color: lightpink;">Item 3</div>
  <div style="background-color: red;">Item 4</div>
  <div style="background-color: lightgray;">Item 5</div>
  <div style="background-color: yellow;">Item 6</div>
</div>

In this example, the outer <div> is set as a grid container using display: grid;. The grid-template-columns property specifies that the grid should have three columns of equal width (1fr), and the grid-gap property sets a gap of 10 pixels between grid items. The child <div> elements become grid items, and their position within the grid is determined by the order in which they appear in the HTML markup.

By using the grid value and the accompanying grid-related properties, you can create versatile and dynamic grid layouts that adapt to different content and screen sizes.

The grid value of the display property is widely supported in modern browsers, making it a powerful and reliable tool for creating complex layouts in CSS.

Reference