给元素添加padding值之后，对应的元素宽高会被撑大，就是padding值添加在元素原有的宽高之上
如果想保证盒子原本的宽高大小，就得减去添加的padding值和border值
在W3C的标准盒模型下，padding一般是给外面的大盒子或者父元素添加的，内填充，添加之后做减法
给图片加padding实现1px像素的边框
水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景色区域（并占据空间）
该特性的，适用场景
高度可控的分隔线
padding不支持任何形式的负值
padding的百分比均是相对于宽度计算的
实现正方形
移动端app 正方形头图，padding可保证所有屏幕大小下都是正方形
同样是相对于宽度计算的
默认的高度宽度细节有差异，block水平元素的高宽是一样的
padding会断行，padding的背景色也会换行
inline元素的垂直padding会让"幽灵空白节点"显现，也就是规范中的"struct"出现
幽灵空白节点本质上是内联元素文本的content-area区域，content-area区域只受fon-size大小的影响，可以通过font-size为0，让其看不见
参考解答：https://segmentfault.com/q/1010000014296346
特例：元素很多内置的一些padding值，或者margin值，尤其是margin值，基本上是以em为单位，也就是说是相对于文字本身大小的，但是ol/li内置的padding-left，单位是以px为大小的，而不是em。使用固定的px padding-left，会有对齐的问题。
例如Chrome浏览器下默认px
如果字号很小，间距就会很开
如果字号很大，序号就会爬到容器外面
经验：在开发的过程中使用的字体一般是12px14x，此时padding-left为22px25px是最合适的，可基本上实现下面的内容和上面的列表序号左对齐。如果字体较大，padding-left设置大一点，即可对齐
border-style:double可以画三道杠，这个也可以。
15px间隙的三道杠
30px间隙的三道杠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.box{
width: 150px;height: 30px; /* 规定盒子宽高，达到限制边框生成杠线 */
border-top: 30px solid;/* 上边框 */
border-bottom: 30px solid ; /* 下边框 */
padding: 30px 0;/* 中间撑开两个透明区域 */
background-color:currentColor;/* 当前的标签所继承的文字颜色，也可自定义颜色值 */
/* 关于currentColor说明，详去大神网站去看：http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/ */
background-clip: content-box;
/* 这句话是只让背景色在内容区域显示，padding不算内容区了，就不会让padding那上下30px变色，就制作成了三横线！ */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
原文：https://www.cnblogs.com/hsbolg/p/13510236.html