-
CSS Syntax
-
CSS Selectors
-
CSS How To
-
CSS Comments
-
CSS Colors
-
CSS Backgrounds
-
CSS Borders
-
CSS Margins
-
CSS Padding
-
CSS Dimension
-
CSS Box Model
-
CSS Outline
-
CSS Text
-
CSS Fonts
-
CSS Links
-
CSS Lists
-
CSS Tables
-
CSS Display
-
CSS Position
-
CSS Overflow
-
CSS Float
-
CSS Align
-
CSS Combinators
-
CSS Pseudo-class
-
CSS Opacity
-
CSS Attr Selectors
-
CSS Forms
-
CSS Transitions
-
CSS Transforms
-
CSS Animations
-
CSS !important
-
CSS Flex
-
CSS GRID
-
CSS Media Queries
CSS Display
The layout and presentation of content on a webpage are primarily influenced by CSS, and the display property plays a pivotal role in determining how elements are visually rendered. At its core, the display property decides the box type of an element and how it interacts with surrounding elements.
Why is it important?
Control Layout: The display property is a gateway to controlling how your HTML elements are presented. Whether they stack vertically (block), sit inline with text (inline), or employ modern techniques like flexbox (flex) and grid (grid), the display property is the key.
Hide or Show Content: Beyond influencing layout, display can be used to hide (none) or show content, giving developers a mechanism to toggle visibility without removing an element from the DOM.
Modern Layout Techniques: With the advent of responsive and adaptive design, flexible and grid layouts (enabled through flex and grid values) have become indispensable tools for developers. These techniques offer more control, consistency, and adaptability in designs across various devices and screen sizes.
How does it work?
Every HTML element has a default display value, depending on what type of element it is. For instance:
<div> elements default to block.
<span> and <a> elements default to inline.
However, the display property in CSS allows you to override these defaults.
When you set the display property, you’re essentially defining how that element should behave in the flow of your document.
Common Values:
Block: Elements are presented in boxes that stack vertically.
Inline: Elements are presented in boxes that flow within the content, horizontally.
Inline-Block: Elements flow inline but retain block properties, such as setting width and height.
None: The element and its content are removed from the visual flow of the page.
Flex: The element behaves as a flex container, enabling flexible box layouts.
Grid: The element behaves as a grid container, enabling grid-based layouts.
Here, we’ll delve into its values, offering a description and example for each.
1. display: block (values and explanation):
block: Makes the element behave like a block element. It starts on a new line and occupies the full width available.
Block-level elements are the building blocks of website layouts. They stack vertically on top of each other and occupy the full width of their parent container unless specified otherwise.
| CSS | HTML | Result |
|---|---|---|
| .block-element { display: block; } | <div class=”block-element”>This is a block element </div> | A <div> element that starts on a new line and takes up the full width. |
This is most commonly used for elements that should appear on their line, like headings, paragraphs, and divs.
2. display: inline
Values and Explanation:
inline: Makes the element behave like an inline element. It doesn’t start on a new line and only occupies as much width as necessary.
Inline elements flow within the content, appearing on the same line as the content around them, and only take up as much width as necessary.
| CSS | HTML | Result |
|---|---|---|
| .inline-element { display: inline; } | <span class=”inline-element”>This is an inline element </span> | A <span> element that appears inline with other content. |
This is typically used for elements within content, like links or emphasized text, that shouldn’t break onto a new line.
3. display: inline-block (values and explanation):
inline-block: Elements are placed inline, but they retain block properties. They don’t start on a new line but can have width and height set. It’s like a hybrid between block and inline, allowing for inline placement but also specifying dimensions.
| CSS | HTML | Result |
|---|---|---|
| .inline-block-element {display: inline-block; width: 200px; height: 100px; } | <div class=”inline-block-element”>Inline-block element </div> | A <div> element that appears inline but can have specific width and height. |
This is useful for elements that need to sit side-by-side (like navigation links) but also need set dimensions.
4. display: none (values and explanation):
none: The element will not be displayed, and it takes up no space in the layout, making it invisible. This is a way to hide elements from the rendered page. It’s as if the element does not exist in the document.
| CSS | HTML | Result |
|---|---|---|
| .hidden-element {display: none; } | <div class=”hidden-element”>This element is hidden </div> | A <div> will not appear on the page. |
This is useful when you want to completely remove an element from the page, either temporarily or based on certain conditions.
5. display: flex (values and Explanation):
flex: The element behaves as a block-level flex container.
Flexbox layout is designed to distribute space along a single axis (row or column), enabling more complex layouts and alignments.
| CSS | HTML | Result |
|---|---|---|
| .flex-container {display: flex; } | <divclass=”flex-container”> <div > Item 1 </div> <div > Item 2 </div> </div> | A flex container with two items side by side. |
This is essential for modern web design, making it easier to design complex layout structures with a cleaner toolset.
6. display: inline-flex (values and explanation):
inline-flex: The element behaves as an inline-level flex container. It’s like flex, but the container itself behaves inline with other content.
| CSS | HTML | Result |
|---|---|---|
| .inline-flex-container {display: inline-flex; } | <span class=”inline-flex-container”> <div > Item 1 </div> <div > Item 2 </div> </span> | An inline flex container with two items side by side.. |
Useful when you want a flex container to sit inline, like within a paragraph or heading.
7. display: grid (values and explanation):
grid: The element behaves as a block-level grid container. The Grid layout allows for designing complex layout structures with a more consistent and readable toolset than traditional methods.
| CSS | HTML | Result |
|---|---|---|
| .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } | <div class=”grid-container”> <div > Item 1 </div> <div > Item 2 </div> </div> | A grid container with three items. |
This is another cornerstone of modern web design, providing the ability to design advanced 2D layouts.
8. display: inline-grid (values and explanation):
inline-grid: The element behaves as an inline-level grid container. It’s similar to a grid, but the container itself behaves inline with other content.
| CSS | HTML | Result |
|---|---|---|
| .inline-grid-container { display: inline-grid; grid-template-columns: repeat(2, 1fr); } | <div class=”grid-container”> <div > Item 1 </div> <div > Item 2 </div> </div> | An inline grid container with two items. |
This can be useful for grid-based content that should sit within a flow of text or other inline elements.
The display property is foundational in web design, serving as the starting point for creating layouts, aligning content, and ensuring that the design is both functional and aesthetically pleasing. As CSS evolves, new values and capabilities are added to the display property, further empowering designers and developers to create intricate and responsive web layouts.
Course Video
YouTube Reference :
1) CSS Display in Hindi/Urdu
