行内元素的padding-top、padding-bottom是否影响其行内框?

行内元素的padding-top、padding-bottom是否影响其行内框?

CSS权威指

非替换元素

198页:内边距、外边距和边框都可以应用到行内非替换元素,行内元素的这些方面不会影响行框的高度

199页:这个内边距并没有改变内容区的具体形状,不过它会影响这个元素行内框的高度。

替换元素:

202页:给替换元素设置padding和border...这个过程的不寻常之处在于,内边距和边框确实会影响行框的高度,因为他们要作为行内替换元素行内框的一部分(不同于行内非替换元素)。

我怎么觉得这两处矛盾了

阅读 4.2k
3 个回答
说非替换元素时,198那块写的是行框,199写的是行内框,非替换元素更改内边距等引起行内框改变,但不会影响到行框,即有可能内容会重叠。  
而行内替换元素改变`margin`等改变行内框时会影响到此行行框的高度,即会把这行撑起来,只有负`margin`才可以使行内替换元素与别的行的内容重叠。

我觉得作者翻译的有问题,你给的是这样:
中文第三版199页:

这个内边距并没有改变内容区的具体形状,不过它会影响这个元素行内框的高度。

英文第三版192页:

Note that this padding does not alter the actual shape of the content height, so it will not affect the height of the inline box for this element.

译者把not忽略了,,,,其实就是翻译错了,,,,而且我自己测试出来原作是对的,翻译是错的,英文原版请看我的 github

新手上路,请多包涵

第一次在segmentfault回答。楼上@xianshenglu正解, 补充楼上的详细解答:

解决:翻译错误!!!

答案:与这两点没有矛盾冲突:1、非替换元素的内边距、边框和外边距对行内元素没有垂直效果,不会影响元素行内框的高度,也不会影响包含元素的行框的高度!2、行内元素设置上下padding、上下margin无效!

英文第三版192页:
Note that this padding does not alter the actual shape of the content height, so it will not affect the height of the inline box for this element.Similarly, adding borders to an inline element will not affectthe way line boxes are generated and laid out.
注意,这个内边距并没有改变内容区的具体形状,所以它不会影响这个元素行内框的高度。类似地,向一个行内元素增加边框不会影响行框的生成和布局。

所以下面说的是两点:1、边框边界由font-size控制而不是行高控制!2、行内元素的边框包围内容区及所有的内边距和边框,注意:边框包围所有的内边距和边框(包括其他行内框的边框)!
内边距会把边框从文本本身拉开,但是因为行框没有变化,因为行内框没有变化,所以不同行之间的距离没有变化,就导致了不同行的边框会发生重叠现象,如下图7-41所示:

图片描述

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