[CSS学习] padding属性讲解

记：本文可以作为张老师在慕课网上讲解课程的学习笔记

定义

padding：通过查MDN文档可知

the padding property sets the padding space on all sides of an element. The padding ares is the space between the content of the element and its border. Negative values are not allowed.

小实验：

对于block水平元素

1. padding值如果很大，一定会影响元素的尺寸

2. width如果不是auto而是一个固定值，那么padding值一定会影响元素尺寸

3. width如果是auto或者box-sizing=border-box，只要padding值设置的合理，就不会影响元素尺寸

对于Inline水平元素

水平方向的padding值会影响元素尺寸，而垂直方向的padding值不会影响元素尺寸，只会影响内容区域的高度和背景色。

应用场景: 文字之间的短分割线

inline元素如果有垂直方向的padding值，那么会出现“幽灵空白节点”，会影响元素的高度。通过设置font-size=0可以保持高度不变形。

 

取值

padding的取值不支持负数

padding的百分比数字是基于元素的宽度来计算的

 

标签元素内置padding值

1. 所有浏览器Input/textarea输入框内置padding

2. 所有浏览器Button按钮内置padding

3. 部分浏览器select下拉内置padding

4. 所有浏览器radio/checkbox无内置padding

5. button按钮元素的padding最难控制, padding与高度的计算不兼容

Chrome {padding: 0;}

FireFox  button::-moz-focus-inner{ padding:0; }

IE7 button{ overflow: visible;}

小技巧: 通过label标签模拟button标签，达到所有浏览器下button的高度一致。

<button id='btn'></button>

<label for='btn'>xx</label>

CSS设置 button{ z-index, margin-left, position}来达到移除屏幕之外的隐藏

label{ display: inline-block; line-height; padding;}

 

 

padding与图形绘制

a. 如何实现三道杠图形

使用CSS属性padding, background-clip

background-clip表示指定对象的背景图像向外裁剪的区域

属性值: padding-box(从padding区域开始向外剪裁背景，边框下面没有背景，延伸至内边距外沿)  border-box(从border区域开始向外剪裁背景，背景延伸到边框外沿)  content-box(从content区域开始向外剪裁背景) text(从前景内容的形状作为剪裁区域向外剪裁，如此可实现使用背景作为填充色之类的遮罩效果)

 <div class="line-tri"></div> 

.line-tri{
　　width: 15px;
　　height: 30px;
　　padding: 15px 0;
　　border-top: 30px solid;
　　border-bottom: 30px solid;
　　background-color: currentColor;
　　background-clip: content-box;
}