标题（ h1）中多出来的这些高度是什么属性造成的？

2015-06-03 22:30:34 +08:00
 neone

简单的一段代码：

<!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并且没有其他设置为什么计算得高度不一样？

2543 次点击
所在节点    问与答
11 条回复
bindy
2015-06-03 22:55:59 +08:00
line-height
neone
2015-06-03 23:28:36 +08:00
@bindy 刚才试了下`line-height`可以改变`p`为16px，chrome中`p`和`a`都继承`line-height: normal`。还是不明白为什么两个元素会计算的不一样。
muzuiget
2015-06-04 00:01:49 +08:00
老实去啃什么是「CSS盒子模型」吧，首先你的对「高度」定义很模糊，如果是上下空白，margin、padding、border、line-height、height，都能增加文字的上下空白。
MaiCong
2015-06-04 00:08:09 +08:00
因为：
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
banri
2015-06-04 00:20:38 +08:00
楼上正解。

是margin而不是line-height，浏览器默认属性中h1标签有上下边距，字号以及加粗。

楼上图中的before after可用margin-top bottom覆盖~
neone
2015-06-04 08:36:07 +08:00
@MaiCong @banri 但是如果把p标签换成div，高度也是计算成18px。
http://a.hiphotos.baidu.com/shitu/pic/item/4e4a20a4462309f7f82b578f770e0cf3d6cad6e3.jpg
banri
2015-06-04 09:42:08 +08:00
@neone 百度不支持外链

你的意思我了解了，首先确认自己是否reset/normalize（不过应该不是这个问题引起的…）

把a添加一个display:block应该高度就一样的了…
banri
2015-06-04 10:10:40 +08:00
*更正下...之前手机看的没注意HTML结构，以为包裹a了，以上我的回答全作废 = =

我这里……两个都是16px啊…………

（上面那个我想把a给block化的原因是看错HTML结构了……之前有块级包裹行级出现间距的情况，然后把行级块状化就行了……不过显然你这个不是这个问题 =。=）
loading
2015-06-04 10:12:54 +08:00
装个 chrome ,审查元素，什么都有！
banri
2015-06-04 10:21:32 +08:00
过来更新下答案，一大早还真容易迷糊 -。-

某位楼上所说的line-height确实是可以解决的，不过不建议用line-height:16px，而是建议使用line-height:1，意思就是1倍行高。

不同浏览器在不同系统下都有不同的默认样式，所以一般都会先使用reset.css或者normalize.css来消除，前者是激进的全部抹掉，后者是温和的保持各浏览器统一但保留一定需要的东西。使用过程中后者也存在些许的遗漏，但依然推荐后者。

你所见到的情况就是浏览器默认样式造成的，我这里的Chrome默认就是1倍行高所以都是16px，但是FF就变成了17和19……设置行高后就没问题了，统一16px了。

这次应该不会改了 = =
jacob
2015-06-04 17:52:02 +08:00
a{display:block}

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/195930

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX