CSS：对填充行为的怀疑答案

【问题标题】：CSS: Doubts with padding behaviourCSS：对填充行为的怀疑
【发布时间】：2015-03-11 15:20:02
【问题描述】：

我正在使用 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 的边框。还要注意#first DIV 的padding-top:0px 属性。现在我的问题来了：如果我把这个属性改成padding-top:1px，就会出现一个奇怪的行为：

请注意，#first DIV 的内容确实与顶部保持 1px 的距离，正如预期的那样。 但是#first DIV 内容底部和#second 顶部之间的空格消失了，我不明白为什么。

非常感谢您的帮助。谢谢！

【问题讨论】：

jsfiddle.net/jpvsjmz5 这是你要找的吗？
浏览“CSS 盒子模型”并了解边距、填充、边框的工作原理w3schools.com/css/css_boxmodel.asp。万事如意

标签： html css padding spacing

【解决方案1】：

试试这个：

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>

DEMO HERE

【讨论】：