在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的结果容易理解。
1。 div#d1的高度为何是64px,不是80px?
d1 不是 display:block / inline-block
2。为何对于p1,xx为何没有写入红线中。p2的结果容易理解。
因为line-height 80px, 而p 只有30px的高度,去掉 line-height:80px 就在红线里面了