摘要：浅谈浅谈是盒子模型的一部分，代表盒子模型的内边距。可能的值可能的值值描述浏览器计算内边距规定以具体单位计的内边距值，比如像素厘米等。默认值是规定基于父元素的宽度的百分比的内边距规定应该从父元素继承内边距常用的写法是使用，比如。
padding是CSS盒子模型的一部分，代表盒子模型的内边距。
padding属性有四个值，分别代表上、右、下、左的内边距。
.box {
padding: 10px 5px 15px 20px;
}此时，.box的内边距为：
padding属性的值可以简写，按照值的数量可以分为三种情况：
.box {
padding: 10px;
}此时，.box的内边距为：
.box {
padding: 10px 5px;
}此时，.box的内边距为：
.box {
padding: 10px 5px 15px;
}此时，.box的内边距为：
tips：实际使用时，大多数人都会使用单个值、两个值、四个值的写法，三个值的写法常常被忽略，所以需要重点了解三个值的简写写法。
当对行内元素设置内边距时，内边距不会影响内联元素的行高，但是会撑开背景。
我是行内元素
朕的背景！！！span {
padding: 10px;
background: #cccccc;
}
.text-bottom {
height: 200px;
background: #000;
}效果如下：
可以发现：行高并没有变化，背景按内边距撑开的面积显示，细心的话可以发现，背景延伸到了其他行，并发生了重叠，并没有挤开其他行，这也进一步说明了行高并没有改变。
padding不像margin可以使用负值，因为，margin再怎么用，也不会影响盒模型的宽度、高度，而padding身为盒模型的内边距，会直接影响盒模型的宽度、高度。并且，padding设为负值并没有意义，直接修改content一样可以达到效果。
| 值 | 描述 |
|---|---|
| auto | 浏览器计算内边距 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px |
| % | 规定基于父元素的宽度的百分比的内边距 |
| inherit | 规定应该从父元素继承内边距 |
tips：padding常用的写法是使用length，比如padding: 10px。但是，有时使用百分比可以实现一些骚操作，比如实现一个自适应的正方形：
.box {
float: left;
width: 100%;
padding-bottom: 100%;
background: #cccccc;
}效果如下：
可以看到，通过padding-bottom: 100%实现了一个自适应的正方形。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2000.html
摘要：盒模型的组成大家肯定都懂，由里向外盒模型是有两种标准的，一个是标准模型，一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高， 而在IE模型中盒模型...
摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考 圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...
摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考 圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...
摘要：直白点事件触发顺序子元素父元素事件冒泡和事件捕获图解标准事件监听标准事件监听其实是事件冒泡和事件捕获的混合体任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达。 前言 本文主要介绍 事件冒泡 和 事件捕获 以及Vue中的capture 主要内容 事件捕获 含义:从最特定的事件目标到最不特定的事件目标(document对象...
阅读 1565·2021-10-09 09:44
阅读 2686·2021-09-27 13:36
阅读 1260·2021-09-22 15:33
阅读 1104·2021-09-22 15:23
阅读 1012·2021-09-06 15:02
阅读 1548·2019-08-29 16:14
阅读 2778·2019-08-29 15:26
阅读 2281·2019-08-28 18:08
