Question

无法理解为什么会发生以下情况：

在div中添加一个p标签会导致它下拉，我无法找到或解决此问题的原因：

代码：

＆＃13;

html{
    box-sizing: border-box;
}



#BoxContainer{
    border: 5px solid black;
        box-sizing: border-box;
}


#Box1{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    text-align: center;
}

#Box2{
    background-color: blue;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
}

#Box3{
    background-color: yellow;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    
}

p{
    display: inline;
    margin: 0;
}

＆＃13;

<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="testSite">
        <meta name="keywords" content="Responsive Design">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    
<body>
<div id="BoxContainer">
    
    <div id="Box1"></div>
    <div id="Box2"></div> 
    <div id="Box3"></div>
    
</div>
</body>
</html>

＆＃13;

我尝试从p中删除边距并显示为内联无效。有谁知道为什么会这样？

Answer 1

添加#BoxContainer > *{vertical-align:top;}，它会修复它。

html{
    box-sizing: border-box;
}



#BoxContainer{
    border: 5px solid black;
        box-sizing: border-box;
}

#BoxContainer > *{vertical-align:top;}

#Box1{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    text-align: center;
}

#Box2{
    background-color: blue;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
}

#Box3{
    background-color: yellow;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    
}

p{
    display: inline;
    margin: 0;
}

<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="testSite">
        <meta name="keywords" content="Responsive Design">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    
<body>
<div id="BoxContainer">
    
    <div id="Box1">g</div>
    <div id="Box2"></div> 
    <div id="Box3"></div>
    
</div>
</body>
</html>

p标签弄乱CSS

1 个答案: