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夠公平的。我看到已經有一個重複的答案能夠解釋這一點。所以我會稍微刪除我的答案 –

p標籤中的CSS

回答

相關問題