Important CSS Property – Introduction to Display, Are You Still Stuck with just display:none?

What exactly is the display property?

The display property is a crucial attribute in CSS that governs how elements are presented.

To put it in more technical terms, it controls how a specified element box is rendered, significantly impacting the overall layout.

What are the display properties available?

The commonly used display values are as follows:

• none: This is probably the most familiar to everyone; it hides the element.
• block: Renders an element as a block-level element, occupying the full width of its parent. The next layout starts on the next line.
• inline: Inline elements are displayed in the same line, occupying only the necessary width for their content.
• inline-block: Combines the characteristics of both inline and block elements. The element is displayed in the same line, but its width and height can be set.
• flex: Establishes a flex container, allowing flexible arrangement of items within it using the flex layout model.
• grid: Creates a grid container, enabling a powerful two-dimensional layout using the grid layout model.
• table: Behaves like an HTML <table> element, transforming the element into a table element with associated table-row and table-cell elements.

These different display values offer versatile ways to control the layout and positioning of elements in a webpage.

And here is the example of difference of block, inline and inline-block

See the Pen Untitled by story zyra (@story-zyra) on CodePen.

⭐Indeed, the default display value for the <div> element is block, which is why it naturally causes a line break and takes up the full width of its parent container.

Conclusion

Understanding the various display values in CSS opens up a realm of possibilities for controlling how elements are rendered and positioned within a layout.

So, don’t limit yourself to just display: none

🧡 Hopefully, this post has helped you to some extent.

🧡You can support me by clicking some ad, Thanks a lot

✅If you got any problem about the explanation, please feel free to let me know

Some Random notes