Why do div offset in different cases

Question

Here is my code for different situations. Demo1:Why aren't the red boxes on the same level as the blue boxes.

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        #div2-child {
            width: 20px;
            height: 20px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="div1">x</div>
    <div id="div2">
        <div id="div2-child"></div>
    </div>
</body>

Demo2:Based on Demo1, I've removed the x, why is the blue box at the bottom.

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        #div2-child {
            width: 20px;
            height: 20px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2">
        <div id="div2-child"></div>
    </div>
</body>

Demo3:Why is every div1 and div-child on the same line when x is added.

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        #div2-child {
            width: 20px;
            height: 20px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="div1">x</div>
    <div id="div2">
        <div id="div2-child">x</div>
    </div>
</body>

Demo4:Why only div2 had the marginTop, but div1 also felt the marginTop. Is there any way to bring div1 back to the top.

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
        }

        #div1 {
            display: inline-block;
            background-color: red;
            width: 50px;
            height: 50px;
        }
        #div2 {
            display: inline-block;
            background-color: blue;
            width: 50px;
            height: 50px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

This is an interesting question. For the benefit of other potential answerers, is your question purely academic in nature, or do you have a specific problem you are trying to solve or UI that you're trying to achieve? — Jake, Mar 24 '23 at 06:01
This is a purely academic question. I'm not sure what caused it, maybe margin, or line height, or something else. @Jake — chenmingzhen, Mar 24 '23 at 06:11

Jordy · Answer 1 · 2023-03-24T06:30:17.367

Add this in your CSS:

display: flex in body to make the boxes' position on the same line. (reference).
margin-right: 10px in #div1 to give space on #div1's right

body {
    margin: 0;
    display: flex;
}

#div1 {
    display: inline-block;
    background-color: red;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
#div2 {
    display: inline-block;
    background-color: blue;
    width: 50px;
    height: 50px;
}

#div2-child {
    width: 20px;
    height: 20px;
    background-color: yellow;
    display: inline-block;
}

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2">
        <div id="div2-child"></div>
    </div>
</body>

Sorry, maybe I didn't make it clear, but I know how to center them, which is what you mean by flex. I wanted to explore why each Demo didn't work as expected. For example demo1, I expect should be on the same line and not need to use the other way — chenmingzhen, Mar 24 '23 at 06:37

Why do div offset in different cases

1 Answers1