padding
111111
高度可控的分割线
对于inline水平元素,水平padding影响尺寸,垂直padding不影响尺寸,但是会影响背景颜色
对于inline水平元素,水平padding影响尺寸,垂直padding不影响尺寸
padding会影响元素的尺寸
对于inline水平元素,水平padding影响尺寸,垂直padding不影响尺寸
对于inline水平元素,水平padding影响尺寸,垂直padding不影响尺寸
padding会影响元素的尺寸
垂直padding不影响尺寸
padding 影响尺寸
高度可控分割线
inline水平方向影响尺寸
高度可控的分割线
padding inline元素对尺寸的影响
padding对水平元素的尺寸影响
padding影响元素尺寸
width:auto,box-sizing:border-box
padding对block元素的影响
padding 应用
+++++++++++++++
+++++++++++++
padding的影响
11111
利用此特性:
对于inline水平元素
水平padding影响尺寸,垂直padding不影响尺寸,但影响背景色(占据空间)
对于block水平元素: padding影响元素的尺寸
但是width:auto 或box-sizing为border-sizing为border-box时,padding不影响尺寸,除非padding大小超过了宽高的大小,padding则同样影响元素尺寸
改变content area
对于block水平元素,
当width:auto or box-sizing:border-box,padding值没有暴走,不影响尺寸。
padding值暴走,一定会影响尺寸。e.g.当padding大小超过宽高的时候,容器宽度改变,如中间有文字,那么文字以最小宽度显示。
width非auto,padding影响尺寸,容器扩大。
对于inline水平元素,
水平padding影响尺寸,垂直padding不影响尺寸,但是会影响背景颜色(占据空间)。
应用:高度可控的分割线
比如:实现 注册 | 登录,中间的分割线
html:
注册<span></span>登录
CSS:
span{ padding: 16px 6px 1px; margin-left: 12px; border-left: 2px solid; font-size:0; }