p标签中的CSS

搞乱布局不明白为什么下面发生的事情：p标签中的CSS

只是增加AP标签内一个div导致它降下来，我无法找到一个理由或修复此行为：

代码：

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

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

我试过从p中删除边距并显示为内嵌无效。有谁知道为什么会发生这种情况？

来源

2017-09-24 Zeruko

是的，但它不是p标签，导致它，它是 “你好” 的文字。 – Alohci

是的，它也发生没有p标签。停止发生这种情况的唯一方法是，如果我将p标记置于绝对位置，以使其超出正常的文档流程。我的问题是为什么它首先发生，不应该只占用其父元素内的空间？ – Zeruko

请注意，在这是重复的问题中，错位的解决方案存在于问题中。在你的内联块上使用'vertical-align：top'。 – Alohci

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

来源

2017-09-24 17:19:42

谢谢你的回答。我的问题是为什么会发生这种情况，我已经开始工作了。我看不出为什么div内的文本突然占据了空间以外的原因。 – Zeruko

@Zeruko够公平的。我看到已经有一个重复的答案能够解释这一点。所以我会稍微删除我的答案 –

回答

相关问题