CSS Display

CSS display is a property that specifies the display behavior of an element. It determines how an element is rendered on the page and how it interacts with other elements. Here are some common values for the display property with examples:

1. `block`

Description: The element is displayed as a block-level element, taking up the full width available and starting on a new line.
Examples: <div>, <p>, <h1>, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Display</title>
    <style>
        .block-example {
            display: block;
            width: 200px;
            height: 50px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="block-example">Block Element</div>
    <div class="block-example">Another Block Element</div>
</body>
</html>

2. `inline`

Description: The element is displayed as an inline element, only taking up as much width as necessary and not starting on a new line.
Examples: <span>, <a>, <strong>, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Display</title>
    <style>
        .inline-example {
            display: inline;
            width: 200px; /* Width and height will not be respected */
            height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <span class="inline-example">Inline Element</span>
    <span class="inline-example">Another Inline Element</span>
</body>
</html>

3. `inline-block`

Description: The element is displayed as an inline-level block container. It allows setting width and height, but it does not start on a new line.
Examples: <img>, <button>, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-Block Display</title>
    <style>
        .inline-block-example {
            display: inline-block;
            width: 200px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="inline-block-example">Inline-Block Element</div>
    <div class="inline-block-example">Another Inline-Block Element</div>
</body>
</html>

4. `none`

Description: The element is not displayed and does not take up any space on the page. It is removed from the layout.
Examples: Often used for hiding elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>None Display</title>
    <style>
        .none-example {
            display: none;
        }
    </style>
</head>
<body>
    <div class="none-example">This element will not be visible.</div>
    <div>Other Content</div>
</body>
</html>

5. `flex`

Description: The element is a flex container, allowing its children to be laid out according to the flexbox model.
Examples: Commonly used in modern layouts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Display</title>
    <style>
        .flex-container {
            display: flex;
            background-color: lightgoldenrodyellow;
        }
        .flex-item {
            background-color: lightsteelblue;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

6. `grid`

Description: The element is a grid container, allowing its children to be laid out according to the grid model.
Examples: Useful for complex layouts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Display</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightseagreen;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
    </div>
</body>
</html>

These examples cover some of the most commonly used display values in CSS. Each value helps control the layout and visibility of elements on a webpage.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us

CSS Display

1. block

2. inline

3. inline-block

4. none