The 'display' property is the most important tool for defining the structural behavior of an element in the DOM flow. It determines how elements interact with their neighbors and how they occupy space in the document architecture.
1The Flow of the Document
Elements typically follow one of three primary display modes:
- →Block: Think of these as 'bricks'. They stack vertically and always take up the full width available. Perfect for structural elements like headers and footers.
- →Inline: Think of these as 'text'. They flow along the same line and only wrap when they hit the edge. They are perfect for links and bold text, but they cannot have their own width or height.
- →Inline-Block: The best of both worlds. They flow like text but respect dimensions like bricks. This is the go-to choice for buttons and navigation items.
2Vanishing Acts
There are three ways to hide an element, each with a different side effect:
- →display: none: The element is 'deleted' from the layout. Other elements shift to fill the gap.
- →visibility: hidden: The element becomes a 'ghost'. You can't see it, but its physical space remains, creating a blank gap.
- →opacity: 0: The element is invisible and keeps its space, BUT it remains interactive. A user can still click an invisible button with opacity 0.
