这是一个创建于 3467 天前的主题，其中的信息可能已经有所发展或是发生改变。
简单的一段代码：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body {
font-size: 16px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>高度</p>
<a href="#">高度</a>
</body>
</html>
chrome中p计算为18px，而a计算为16px，字体都是16px并且没有其他设置为什么计算得高度不一样？
 |
1
bindy 2015-06-03 22:55:59 +08:00  1
line-height
|
 |
2
neone OP @bindy 刚才试了下`line-height`可以改变`p`为16px，chrome中`p`和`a`都继承`line-height: normal`。还是不明白为什么两个元素会计算的不一样。
|
 |
3
muzuiget 2015-06-04 00:01:49 +08:00
老实去啃什么是「CSS盒子模型」吧，首先你的对「高度」定义很模糊，如果是上下空白，margin、padding、border、line-height、height，都能增加文字的上下空白。
|
 |
4
MaiCong 2015-06-04 00:08:09 +08:00 1
因为：
p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }  |
 |
5
banri 2015-06-04 00:20:38 +08:00 via iPhone 1
楼上正解。
是margin而不是line-height，浏览器默认属性中h1标签有上下边距，字号以及加粗。 楼上图中的before after可用margin-top bottom覆盖~ |
|
6
neone OP @MaiCong @banri 但是如果把p标签换成div，高度也是计算成18px。
http://a.hiphotos.baidu.com/shitu/pic/item/4e4a20a4462309f7f82b578f770e0cf3d6cad6e3.jpg |
|
7
banri 2015-06-04 09:42:08 +08:00 via iPhone 1
|
|
8
banri 2015-06-04 10:10:40 +08:00 1
*更正下...之前手机看的没注意HTML结构，以为包裹a了，以上我的回答全作废 = =
我这里……两个都是16px啊………… （上面那个我想把a给block化的原因是看错HTML结构了……之前有块级包裹行级出现间距的情况，然后把行级块状化就行了……不过显然你这个不是这个问题 =。=） |
 |
9
loading 2015-06-04 10:12:54 +08:00 via Android
装个 chrome ,审查元素，什么都有！
|
|
10
banri 2015-06-04 10:21:32 +08:00 1
过来更新下答案，一大早还真容易迷糊 -。-
某位楼上所说的line-height确实是可以解决的，不过不建议用line-height:16px，而是建议使用line-height:1，意思就是1倍行高。 不同浏览器在不同系统下都有不同的默认样式，所以一般都会先使用reset.css或者normalize.css来消除，前者是激进的全部抹掉，后者是温和的保持各浏览器统一但保留一定需要的东西。使用过程中后者也存在些许的遗漏，但依然推荐后者。 你所见到的情况就是浏览器默认样式造成的，我这里的Chrome默认就是1倍行高所以都是16px，但是FF就变成了17和19……设置行高后就没问题了，统一16px了。 这次应该不会改了 = = |
 |
11
jacob 2015-06-04 17:52:02 +08:00
a{display:block}
|
Select Language