The display property in CSS is fundamental for
controlling the layout of elements on a webpage. It determines how an element
is displayed, how it interacts with other elements, and whether it participates
in the document's layout. Below is an in-depth overview of the display
property, including various values and examples to understand its functionality
better.
Display property can take one of the below values.
1. block
2. inline
3. inline-block
4. none
5. flex
6. grid
7. table, table-row, table-cell
8. initial, inherit, unset
display:block
Block-level elements take up the full width available (by default), and they always start on a new line. Examples of block elements include <div>, <h1>, <p>, and <section>. For the block level elements, default display value is block.
block.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .block-example { /* Default is block for all the block level elements, itis redundant in this exmaple.*/ display: block; width: 500px; background-color: lightblue; margin: 20px 0; border: 2px solid black; } </style> <title>Display Property Example</title> </head> <body> <div class="block-example">This is a block-level element.</div> <div class="block-example">It takes up the full width of its parent container.</div> </body> </html>
When you change the style of display to inline, it change like below.
display:inline
Inline elements only take up as much width as necessary, do not start on a new line, and can sit side-by-side. Examples include <span>, <a>, <strong>, and <em>.
inline.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .inline-example { display: inline; background-color: yellow; } </style> <title>Display Property Example</title> </head> <body> <p>This is a paragraph with <span class="inline-example">inline elements</span> inside it.</p> <p>They don't break to a new line and sit next to each other.</p> </body> </html>
‘display’ property is set to inline for all the inline html element, you no need to set explicitly.
Set the display property value to ‘block’, the screen change like below.
display: inline-block
Inline-block elements are similar to inline elements, but they can have a set width and height. They don't start on a new line but can still be sized like block elements. Useful when you want an element to maintain block-like properties (e.g., width and height) but stay inline with other content.
inline-block.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .inline-block-example { display: inline-block; width: 150px; height: 100px; background-color: lightgreen; margin: 5px; padding-top: 50px; text-align: center; } </style> <title>Display Property Example</title> </head> <body> <div class="inline-block-example">First box</div> <div class="inline-block-example">Second box</div> <div class="inline-block-example">Third box</div> </body> </html>
Change the style of display to ‘block’ you can see below screen.
Change the display property value to inline, you can see below kind of screen.
display:none
This value hides the element from the page. It is removed from the document flow, meaning it doesn’t take up any space, as if it doesn’t exist. Useful for hiding elements dynamically with JavaScript or CSS (e.g., hiding a modal or a menu).
display-none.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .none-example { display: none; } </style> <title>Display Property Example</title> </head> <body> <div class="none-example">This element is hidden and takes no space.</div> <p>This paragraph is visible.</p> </body> </html>
Display property can take flex, grid, table, table-row, table-cell, initial, inherit, unset values as well. I will talk about these in later sections.
No comments:
Post a Comment