CSS Display: here “display” can equal “hide”
Generally, when you think of display, you likely associate it with visibility. However, in web development, the display property is more about element placement than visibility.
In essence, the CSS display property controls how elements are positioned and shown to you on a webpage. It allows us to set values that determine the layout and structure of elements. The display values that define complex layouts for elements and their children include grid, flex and flow while inline, inline block, block and none are commonly used for simpler designs.
By default,HTML elements have their display property set to block. This is why without any CSS styling applied, elements stack on top of each other. You might wonder why this happens. It is because block-level elements in HTML automatically take up the full width of their container, creating an invisible block around each one. To position multiple elements side by side, display property can be changed to either inline or inline-block which allows elements to align on the same horizontal axis.
When an element’s display value is set to inline, the element only takes up as much space as the content requires, allowing other elements to stack on the same horizontal axis. However, with inline, it is nearly impossible to modify the width and height of the element, as it defaults to its content size and cannot be easily resized. The inline-block value solves this problem by allowing you adjust the element’s width and height while still keeping it on the same horizontal line. This flexibility makes inline-block useful for more precise control over the layout and placement of elements on the page.
The None value for the display property completely hides an element form view, as if it never existed in the layout. While the element remains in the DOM (Document Object Model), it is not visible and does not take up any space on the page. This makes display:none useful when you need to remove elements from the visual flow without deleting. The demo below provides a detailed visual explanation of everything discussed above, using actual code examples and additional visual cues.
