csspadding属性
padding与元素尺⼨
css中默认的box-sizing是content-box，所以使⽤padding在定宽元素中会增加元素尺⼨。可以使⽤box-sizing：border-box或者采⽤⽆宽度以及宽度分离原则（推荐使⽤）。
当使⽤box-sizing：border-box在某些情况下还是会改变元素尺⼨的，例如：当padding⾜够⼤时，width会失效。⾥⾯的内容表现为“⾸选最⼩宽度”，对于块状元素⽽⾔
.box{
  width:80px;
  padding:20px 60px;
  box-sizing:border-box
}
padding与内联元素
由于内联元素垂直⽅向的⾏为表现完全受line-height和vertical-align的影响，在设置padding时，视觉上并没有改变上⼀⾏下⼀⾏内容的间距。因此给我们感觉垂直padding没有起作⽤。如果给内联元素加上背景⾊可以发现尺⼨空间确实受padding影响，但是对上下元素的布局没有任何影响，紧紧是垂直⽅向上发⽣了重叠。
div {
background: red;
}
a{
margin-left: 100px;
width: 80px;
padding: 20px 60px;
background-color: #abcdef;
}
<div>sdf</div>
<a class="box">链接</a>
<div>sdf</div>
css还有很多场景会出现这种不影响其他元素布局⽽是出现层叠效果的现象，例如，relative元素的定位，盒阴影box-shadow，outline等，这些层叠现在看似类似，但有区别，分为两类：⼀类时纯视觉层叠，不影响外部尺⼨，另⼀类则是会影响外部尺⼨。box-shadow和outline属于前者，⽽这⾥的inline元素的padding属于后者，当给⽗容器设置overflow：auto，层叠区域超出⽗容器时会出现滚动条。
css去掉滚动条
padding对css的应⽤：
1.⾸先我们可以在不影响布局的情况下，优雅的增加链接按钮的点击区域⼤⼩。例如，⽂章中会有⼀些⽂字链接，默认情况下，这些链接的点击区域的⾼度受font-size字体⼤⼩控制的，和⾏⾼没有关系，要是在移动端，我们的⼿指不⼀定能够⼀次点中，此时就有必要增加链接的点击区域⼤⼩，但是要在不影响布局的情况下，此时使⽤padding天然实现我们想要的效果。但如果为了增加点击区域设置成inline-block，设置line-height，就会出现⾏间距等很多⿇烦。
2.利⽤内联元素的padding实现⾼度可控的分割线。传统偷懒的⽅式可能是直接使⽤“管道符”|如：登录|注册。但使⽤管道符，因为是字符，所以⾼度不可控，如果对视觉呈现要求⽐较⾼，就需要进⾏css图形模拟，其中的⽅法之⼀可以借助内联元素和padding属性来实现。
a + a::before{
content: "";
padding: 10px 3px 1px;
font-size: 0;
border-left: 1px solid gray;
margin-left: 6px;
}
<a href="#">登录</a><a href="#">注册</a>
padding的属性值
不⽀持负值，⽀持百分⽐。padding的百分⽐值在⽔平⽅向和竖直⽅向均是相对于宽度计算的。
padding与图形绘制
1.不使⽤伪元素，仅⼀层标签实现⼤队长“三道杠”分类图标效果.icon-menu{
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
2.不使⽤伪元素，仅⼀层标签实现双层原点效果
.icon-menu{
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。