首页 > 是不是inline元素就不能设置宽高margin,padding?

是不是inline元素就不能设置宽高margin,padding?

inline元素和这些属性有必要的联系么?还是说只是碰巧?


首先inline元素的高度和宽度是由元素中的呢内容(包括字体大小和行高影响)决定的。对inline元素设置高宽是无效的,如果你想对元素设置高宽的话,可以将元素设置为inline-block.

inline元素也是符合盒子模型的,所以为她设置margin和padding是有效的。


inline 行内元素 宽高无效。
margin padding只有左右边距有效,上下无效。


HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
- 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。
- 非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。

讨论margin-topmargin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。

首先我们应该明确外边距可以应用到行内元素,规范中是允许的,不过由于在向一个行内非替换元素应用外边距,对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明margin-topmargin-bottom没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样,是有影响的。

而为替换元素设置的外边距会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。来看看demo:

http://codepen.io/paddingme/pen/JwCDF

对于行内元素,设置左右内边距,左右内边距将是可见的。而设置上下内边距,设置背景颜色后可以看见内边距区域有增加,对于行内非替换元素,不会影响其行高,不会撑开父元素。而对于替换元素,则撑开了父元素。看下demo,更好的理解下:

http://codepen.io/paddingme/pen/CnFpa


inline 元素设置 margin/padding 的一个场景就是复杂排版的微调,比如说,自动在中西文之间加入空格:

<p><code>inline</code>元素设置<code>margin/padding</code>的一个场景就是复杂排版的微调,比如说:</p>

code { margin: 0 0.25em; }

当然,出于一些众所周知的原因,很少有人这么写。

想用浏览器虐 TeX,这玩意还是很有用的。


inline元素(准确来说,是non-replace的inline元素)不能设置竖直方向上的margin和padding,这个是CSS标准所规定的。
margin的规定见这里:http://www.w3.org/TR/CSS2/box.html#margin-properties
padding的规定见这里:http://www.w3.org/TR/CSS2/box.html#padding-propertie 之所以不能设置padding,是因为padding的值是根据目标元素的width计算出来的,而inline, non-replace元素的width是不确定的。

【热门文章】
【热门文章】