Question

我正在使用2个DIV，其中一个位于另一个之上。当我增加第一个DIV的填充顶部值时，会发生比预期更多的事情。

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

使用此代码，我的页面如下：

enter image description here

注意分隔2个DIV的边界。另请注意padding-top:0px DIV的#first属性。现在提出了我的问题：如果我将此属性更改为padding-top:1px，则会出现一个奇怪的行为：

enter image description here

请注意，#first DIV的内容确实与正常值相差1px。 但是#first DIV内容底部和#second顶部之间的空格消失了，我没有理解为什么。

我非常感谢你的帮助。谢谢！

Answer 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

CSS：怀疑填充行为

1 个答案:

CSS：怀疑​​填充行为

1 个答案:

CSS：怀疑填充行为