CSS Display

Mastering CSS Display Property

Cascading Style Sheets (CSS) is a crucial technology for web designers and developers. It enables them to style and layout web pages, making them attractive and responsive. One of the vital CSS properties is the display property, which determines how an element should be shown on a webpage. In this article, we will explore the various values of the display property and how they affect the layout of web pages.

Created By Author (Rutik Patel)

Topics to be covered :

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: flex;
5. display: grid;
6. display: none;

Conclusion

1. display: inline;

The CSS property display: inline; is used to display an element as an inline-level element, meaning that it will flow within the text of a line. Unlike block-level elements, setting specific height and width values for an inline-level element will have no effect on its appearance.

.sub-container{
  display: inline;
  width: 100px; /* does not have any affect */
  height: 100px; /* does not have any affect */
}

display: inline;

2. display: inline-block;

The CSS property display: inline-block; is used to display an element as an inline-level block element. The developer can set height and width values according to requirements.

.sub-container{
  display: inline-block;
  width: 57px; /* Applied Successfully */
  height: 100px; /* Applied Successfully */
}

display: inline-block;

→ inline elements in HTML

• <a>
• <img>
• <em>
• <i>
• <strong>
• <small>
• <span>

3. display: block;

When we use display: block; on an element, it will start on a new line and take up the full available width. You can also set specific width and height values for the element.

.sub-container {
  display: block;
  width: 100px;
  height: 40px;
}

display: block;

→ block elements in HTML

• <div>
• <h1> to <h6>
• <li>
• <p>
• <section>

4. display: flex;

This display: flex property is also used for new-fangled layout methods like Flexbox.

After using display: flex; we get access to many flexbox properties :-

• flex-direction
• flex-wrap
• order
• flex-grow
• flex-flow
• flex-shrink
• justify-content
• flex-basis
• align-items
• align-self

5. display: grid;

CSS Grid Layout is a very useful property for creating website layouts by dividing the page into sections and defining how these sections relate to each other in terms of size, position, and layering.

This can be done using HTML elements to build the layout, making it easier to create visually appealing and organized web pages.

• grid-template
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end
• grid-row
• grid-column
• grid-area
• gap
• row-gap
• column-gap

6. display: none;

if we use display: none; to hide an element, it doesn’t take up any space on the page.

There are three common ways to make an element invisible using CSS:

• display: none;
• opacity: 0;
• visibility: hidden;

Let’s understand the difference between the above methods :

Difference between display, opacity, and visibility

If we apply opacity: 0; or visibility: hidden on any content, it will just make the content disappear from the screen but the area covered by the content remains as it is.

Conclusion:

The display property is a potent tool for web designers and developers, allowing them to control the layout and appearance of web pages. By comprehending the different values of the display property and their interaction with other CSS properties, developers can create visually appealing and responsive designs. Whether you are a beginner or an experienced developer, mastering the display property is a crucial skill for building modern, dynamic web pages. Therefore, understanding the display property is vital for anyone who wants to excel in web design and development.