div,p,line-height的问题

在firefox中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        #d1{border:1px solid black;
            line-height:80px;
        }
        p{border:1px solid red;
            height:30px;
        }
    </style>  
</head>
<body>
    <div id="d1">
    <p class="p1">xx</p>
    </div>
    <p class="p1">xx</p>
</body>
</html>

很简单的结构,

1。 div#d1的高度为何是64px,不是80px?

图片描述

2。为何对于p1,xx为何没有写入红线中。p2的结果容易理解。

图片描述

阅读 2.8k
2 个回答

1。 div#d1的高度为何是64px,不是80px?
d1 不是 display:block / inline-block

2。为何对于p1,xx为何没有写入红线中。p2的结果容易理解。
因为line-height 80px, 而p 只有30px的高度,去掉 line-height:80px 就在红线里面了

d1 不是 display:block / inline-block,64如何计算出来的?这点没有谈出理由

div的line-height属性遗传给p ,p的高度只有30px,无法放入东西,因此文字挤出去了,这个我想通了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题