行内元素能否设置width,height,padding,margin

来源：互联网发布：淘宝中老年服装模特编辑：程序博客网时间：2024/05/28 16:12

学习CSS时曾听说行内元素和块级元素的区别之一在于

行内元素无法设置宽高,也无法设置margin,padding.

从w3的官方文档看,其实还需要对行内元素进行再分类讨论.

简单提下就是在计算top/bottom/height/margin-top/margin-bottom时针对8种不同的盒子(boxes)展开了讨论

其中对于行内元素又分成了2类讨论：

对于inline,non-replaced elements,

若top/bottom/margin-top/margin-bottom的计算值为auto,则按0计算.

width和height属性不起作用(doesn't apply),此时盒子的高度取决于line-height. (而不是所有的内联元素width都不起作用)

参考:

https://www.w3.org/TR/REC-CSS2/visudet.html#q15 (参考10.6 computing heights and margins. )

对于inline,replaced elements,

如果margin-left和margin-right的计算值为auto,则按0计算;

如height/width计算值为auto,且元素有自己的width( intrinsic width),那么 intrinsic width 就被用作width值;

如height/width计算值为auto,但元素没有自己的width( intrinsic width),,但有intrinsic height和intrinsic ratio;

或当width的计算值为auto,而height有其他的计算值,且元素有一个intrinsicratio;这两种情况下width的值=高度*比例(used height) * (intrinsic ratio)

按CSS 2.1.的标准, 如height/width计算值为auto,元素拥有 intrinsic ratio但没有intrinsic height/width,此时width的used value为未定义.

如果height/width的computed value都为auto,元素有ratio,但没有宽高 intrinsic height or width, 在CSS2.1标准中宽度的used value 为未定义.

参考：

https://www.w3.org/TR/CSS21/visudet.html#inline-width

关于computed value

computed value是啥? 暂时称为计算值吧.大概就是浏览器在开发者指定值的基础上的再计算结果.

CSS 2.0的定义看,其实就是最终效果的值.

计算值通常是浏览器在考虑继承值,初始值的基础上得到的结果.

还有比如需要将相对单位(relative values)如em,百分比转换成绝对值( absolute values)。

比如, 我们为某个元素指定 font-size: 16px 和padding-top: 2em.那么of padding-top 其实就是32px,这个值其实就是浏览器再计算的结果,而不是开发者一开始就指定的值(specified value).

再比如对于一些使用百分比的属性,如width, margin-right, text-indent, and top.它们可能会受其他元素的影响,这时

开发者指定的百分比值(percentage specified values)则会被转换成percentage computed values.百分比计算值

此外,对于line-height来说,如果数值后面没有单位(unitless numbers ),该属性也变成计算值

一旦used value被确定下来了(is determined.),那么相对单位也就可以被转换成计算单位,最终确认下来become absolute.

percentage specified values turn into percentage computed values

咬文嚼字下 https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value

参考:

https://www.w3.org/TR/CSS21/visudet.html#inline-width

https://www.w3.org/TR/REC-CSS2/visudet.html#q15 (参考10.6 computing heights and margins. )

non-replaced-inline-element是指什么

http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element

行内元素的padding和margin仅对左右生效.

http://maxdesign.com.au/articles/inline/

0 0