5分钟带你理解内边距属性 padding
1、定义与用法
padding 简写属性在一个声明中设置所有内边距属性
说明：
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
2、padding 属性及其值
| 值 | 描述 |
|---|---|
| auto | 浏览器计算内边距。 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的内边距。 |
| inherit | 规定应该从父元素继承内边距。 |
3、案例分析
3.1、使用内边距
<html lang="en"><head><meta charset="UTF-8"><title>内边距-paddingtitle><style type="text/css">.outer{border: 1px solid #3333ff;margin: 100px;}.box{border: 1px solid #af3333;margin: 50px;padding: 100px;}.inner{background-color: #41ffaa;height: 100px;}style>head><body><div class="outer"><div class="box"><div class="inner">div>div>div>body>
html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8efRstp9-1585221158858)(D:\DAYNOTE\内边距-padding.PNG)]](https://img-blog.csdnimg.cn/20200326191314801.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTU4OTM2,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VjT4msH-1585221158860)(D:\DAYNOTE\内边距-padding示意图.PNG)]](https://img-blog.csdnimg.cn/20200326191331437.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTU4OTM2,size_16,color_FFFFFF,t_70#pic_center)
此时，我们设置 box 的 四周内边距 为 100px
3.2、内边距 padding 的两种写法
<html lang="en"><head><meta charset="UTF-8"><title>内边距-padding的不同写法title><style type="text/css">.outer{border: 1px solid #3333ff;margin: 100px;}.box{border: 1px solid #af3333;margin: 50px;}.inner{background-color: #41ffaa;height: 100px;}/*内边距的第一种写法：四周内边距分开写*/.first{padding-top: 30px;padding-right: 30px;padding-bottom: 50px;padding-left: 20px;}/*内边距的第二种写法：灵活使用四周内边距*/.second{/*padding: 50px; !*指定四周内边距均为50px*!*//*padding: 25px 50px; !*指定上下内边距均为25px、左右边距均为50px*!*//*padding: 25px 50px 75px; !*指定上内边距为25px、右内边距为50px、下内边距为75px、左内边距未设置，默认与右内边距相同*!*/padding: 25px 50px 75px 100px;/*指定上内边距为25px、右内边距为50px、下内边距为75px、左内边距为100px*/}style>head><body><div class="outer"><div class="box first"><div class="inner">内边距的第一种写法：四周内边距分开写div>div>div><div class="outer"><div class="box second"><div class="inner">内边距的第二种写法：灵活使用四周内边距div>div>div>body>
html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EkOJJcsE-1585221158860)(D:\DAYNOTE\内边距 padding 的两种写法.PNG)]](https://img-blog.csdnimg.cn/2020032619141831.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTU4OTM2,size_16,color_FFFFFF,t_70#pic_center)
3.3、利用 padding 计算元素的尺寸
<html lang="en"><head><meta charset="UTF-8"><title>计算元素尺寸title><style type="text/css">.outer{border: 1px solid #3333ff;margin: 100px;}.box{border: 5px solid #af3333;margin: 50px;padding: 70px;}.inner{background-color: #41ffaa;height: 100px;}style>head><body><div class="outer"><div class="box"><div class="inner">div>div>div>body>
html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAzXF5En-1585221158861)(D:\DAYNOTE\利用padding计算元素尺寸.PNG)]](https://img-blog.csdnimg.cn/20200326191439948.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTU4OTM2,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7hwaVnR-1585221158862)(D:\DAYNOTE\box的元素尺寸.PNG)]](https://img-blog.csdnimg.cn/20200326191503135.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTU4OTM2,size_16,color_FFFFFF,t_70#pic_center)
- 通过 谷歌浏览器的F12检查 盒子模型 可以快速查看元素的尺寸
- 元素尺寸由表及里包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）
- 其中子元素是包含在父元素的内容里
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！