What is CSS display property and its related properties with example of all them

1. block: elements are displayed as blocks, taking up the full width of their parent container and creating a new line after them.
2. inline: elements are displayed inline, taking up only as much space as necessary and not creating a new line after them.
3. none: elements are not displayed at all and take up no space on the page.
4. inline-block: elements are displayed inline, but can have a specified width and height.
5. flex: elements are displayed as flexible boxes, allowing for flexible and responsive layout.
6. grid: elements are displayed as a grid, allowing for two-dimensional layout.
7. table: elements are displayed as a table, allowing for tabular data to be displayed in a structured format.
8. list-item: elements are displayed as a list item, allowing for lists to be created using CSS.
9. run-in: elements are displayed as a run-in, allowing for text to flow around them.

• The CSS display property is a powerful tool for controlling the layout and visibility of elements on a web page.
• With the display property, designers can easily switch between block, inline, and none modes to create dynamic and responsive designs.
• The display property is a crucial aspect of CSS, allowing developers to fine-tune their layouts and create visually appealing designs.
• The display property's flexibility allows for a wide range of design options, from simple and minimalistic to complex and intricate layouts.
• By utilizing the CSS display property, designers can create visually stunning and engaging web pages that are optimized for all devices.
• The display property is a fundamental building block of CSS, enabling developers to create responsive and adaptive designs that adapt to different screen sizes and resolutions.
• The display property allows for easy manipulation of elements, making it a valuable tool for creating dynamic and interactive web pages.
• With the display property, designers can easily create visually appealing and engaging designs that are optimized for all devices and screen sizes.

<style>
    /* div elements with class inline */
    div.inline {
        display: inline;
    }
</style>
<div class="inline">This is a div</div>
<div class="inline">This is another div</div>

<style>
    /* Hide the div with the ID "myDiv" */
    #myDiv {
        display: none;
    }
</style>
<div id="myDiv">
    <p>This is a hidden paragraph.</p>
</div>
<b>Above div has no visibility nor taking any place.</b>

<style>
    div.inline-block span {
        display: inline-block;
        background-color: yellow;
        padding: 10px;
    }
</style>
<div class="inline-block">
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
</div>

<style>
    div.table {
        display: table;
    }

    div.row {
        display: table-row;
    }

    div.cell {
        display: table-cell;
        padding: 10px;
        border: 1px solid black;
    }
</style>
<div class="table">
    <div class="row">
        <div class="cell">Row 1, Cell 1</div>
        <div class="cell">Row 1, Cell 2</div>
    </div>
    <div class="row">
        <div class="cell">Row 2, Cell 1</div>
        <div class="cell">Row 2, Cell 2</div>
    </div>
</div>

<style>
    .list-items {
        display: list-item;
        list-style-type: square;
    }
</style>
<div class="list-items">items 1</div>
<div class="list-items">items 2</div>
<div class="list-items">items 3</div>