小编che*_*hen的帖子

为什么div在不同情况下会偏移

这是我针对不同情况的代码。Demo1:为什么红框和蓝框不在同一水平面上? 在此输入图像描述

<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>

Run Code Online (Sandbox Code Playgroud)

Demo2:在Demo1的基础上,我把x去掉了,为什么底部是蓝色的框。 在此输入图像描述

<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; …
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
84
查看次数

标签 统计

css ×1

html ×1