CSS Display
The display property controls how an element is rendered in the document flow. Common values include block, inline, inline-block, and none. Understanding display types is key to structuring layouts, controlling spacing, and manipulating the positioning of elements on a webpage.
Key Topics
- Block vs. Inline Elements
- Inline-Block for Flexible Layouts
- Hiding Elements with display: none
Basic Usage
display: block; makes an element start on a new line and expand to fill available width. display: inline; keeps elements on the same line but only occupies the space of their content.
p {
display: block;
}
span {
display: inline;
}Explanation: Paragraphs (<p>) are block-level by default, taking full width. Spans (<span>) are inline elements, flowing within a line of text. Changing their display values alters how they interact with surrounding content.
Inline-Block
display: inline-block; combines features of inline and block: elements line up horizontally, but you can set width and height, making it useful for menus, buttons, or layout items.
Hiding Elements
display: none; removes an element from the document flow entirely. It no longer affects layout or takes up space, useful for toggling visibility dynamically.
Key Takeaways
- Layout Control: The display property affects how elements line up and space out.
- Block vs. Inline: Block elements stand alone, inline elements flow in text.
- Inline-Block & None: Combine layout flexibility or hide elements entirely as needed.