我正在使用 2 个 DIV，其中一个位于另一个之上。当我增加第一个 DIV 的 padding-top 值时，会发生比预期更多的事情。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="EX7.css">
</head>
<body>
<div id="first">
<p>Um parágrafo com 3 span: <span>SPAN A </span><span>SPAN B </span><span>SPAN C</span>
</div>
<div id="second">
<p>* A fonte do parágrafo tem 20pt, e a dos span tem 8pt.</p>
</div>
</body>
</html>
CSS代码:
body{
padding:0;
margin:0;
}
#first{
width:100%;
height:70px;
background-color:green;
border-bottom:4px solid black;
margin-top:-30px;
padding-top:0px;
}
#second{
margin-top:-27px;
padding-top:-5px;
width:100%;
height:70px;
background-color:green;
}
#first p, #second p{
font-family:sans-serif;
font-size:20pt;
font-weight:bold;
}
使用这段代码，我的页面如下:
注意分隔 2 个 DIV 的边框。另请注意 padding-top:0px #first 的属性(property)分区。现在我的问题来了:如果我将此属性更改为 padding-top:1px , 一个奇怪的行为出现了:
请注意 #first 的内容正如预期的那样，DIV 确实与顶部保持 1px 的距离。 但是#first内容底部之间的空格DIV和顶部的#second一个消失了，我不明白为什么。
非常感谢您的帮助。谢谢!
最佳答案
试试这个:
CSS
body{
padding:0;
margin:0;
}
#first{
width:100%;
height:70px;
background-color:green;
border-bottom:4px solid black;
padding-top:0px;
}
#second{
width:100%;
height:70px;
background-color:green;
}
#first p, #second p{
font-family:sans-serif;
font-size:20pt;
font-weight:bold;
}
p{
margin: 0px;
line-height: 2.6em;
}
HTML
<div id="first">
<p>Um parágrafo com 3 span: <span>SPAN A </span><span>SPAN B </span><span>SPAN C</span></p>
</div>
<div id="second">
<p>* A fonte do parágrafo tem 20pt, e a dos span tem 8pt.</p>
</div>
关于html - CSS:填充行为的疑问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27926038/