《CSS世界》读书笔记（十）

<!-- 《CSS世界》张鑫旭著 -->

温和的padding属性

因为默认的box-sizing是content-box，所以使用padding会增加元素的尺寸。

尺寸表现对具有块状特性的元素和内联元素而言有些许不同。

很多人会觉得内联元素的padding只会影响水平方向，不会影响垂直方向。这种认知是不准确的，内联元素的padding在垂直方向同样会影响布局，影响视觉表现。只是因为内联元素没有可视宽度和可视高度的说法，视觉上没有改变和上一行下一行内容的间距，因为给我们的感觉是垂直padding没有起作用。

如果我们给内联元素加个背景色或者边框，自然可以看到其尺寸空间确实受padding影响了。

示例见 http://demo.cssworld.cn/4/2-1.php  可以看到尺寸有效，但是对上下元素的原本布局没有影响，仅仅是垂直方向发生了重叠。

CSS中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠效果的现象。比如：relative元素的定位、盒阴影box-shadow以及outline等。这些层叠现象虽然看似类似，但实际上是有区别的。分为两类：一类是纯视觉层叠，不影响外部尺寸；另一类则会影响外部尺寸。盒阴影box-shadow以及outline属于前者，而这里的inline元素的padding层叠属于后者。因为父元素设置overflow: auto，会出现滚动条。

示例 http://demo.cssworld.cn/4/2-2.php  实现了利用内联元素的padding实现高度可控的分割线。

padding的百分比值

padding的百分比值无论是水平方向还是垂直方向均是相对于宽度计算的

标签元素内置的padding

（1）ol/ul列表内置padding-left，但是是px。Chrome浏览器下是40px

（2）很多表单元素都内置padding，例如：input、textarea、button等

<button>按钮元素就算我们重置padding为0，在Firefox浏览器下，左右依然有padding，可以试试使用：button::-moz-focus-inner { padding: 0; }

按钮padding与高度计算不同浏览器下千差万别

padding 与图形绘制

（1）不使用伪元素，仅一层标签实现“三道杠”分类图标效果。这里主要是background-clip属性的用法

（2）不使用伪元素，仅一层标签实现双层圆点效果。和上面例子的原理一样。

示例见 http://demo.cssworld.cn/4/2-4.php