<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 2px solid black;
            margin: 5px;
        }

        span {
            border: 2px solid green;
            margin: 5px;
        }

        .inline {
            display: inline;
        }

        .block {
            display: block;
        }

        .none {
            display: none;
        }

        .inline-block {
            display: inline-block;
            height: 30px;
            width: 150px;
        }

        .hidden {
            visibility: hidden;
        }

        .flex-container {
            display: flex;
            gap: 10px;
        }

        .flex-container > div {
            flex: 1;
            margin: 0;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .grid-container > div {
            margin: 0;
        }
    </style>
</head>
<body>
    <section>
        <div>Normal div 1</div>
        <span>Normal span 2</span>
        <div class="inline">inline div 3</div>
        <div class="block">block div 4</div>
        <div class="hidden">hidden div 5</div>
        <span class="block">block span 6</span>
        <div class="none">display:none div 7</div>
        <div class="inline-block">inline-block div 8</div>
        <div class="inline-block">inline-block div 9</div>
        <div class="inline-block">inline-block div 10</div>

        <h2>Flex example</h2>
        <div class="flex-container">
            <div>Flex item 1</div>
            <div>Flex item 2</div>
            <div>Flex item 3</div>
        </div>

        <h2>Grid example</h2>
        <div class="grid-container">
            <div>Grid item 1</div>
            <div>Grid item 2</div>
            <div>Grid item 3</div>
            <div>Grid item 4</div>
            <div>Grid item 5</div>
            <div>Grid item 6</div>
        </div>
    </section>
</body>
</html>