文章目录 盒子模型的内边距——paddingpadding的基础属性padding复合属性padding会影响盒子实际大小padding不会撑开盒子的情况padding应用——影响盒子好处 盒子模型的内边距——padding
盒子由border（边框）、content（内容）、padding（内边距）、margin（外边距）。padding属性用于设置内边距，既边框与内容之间的距离。
padding的基础属性单位一般是px：
padding简写属性可以有一到四个值。
给盒子指定padding值之后，会发生2件事情：
内容和边框有了距离，添加了内边距。padding影响了盒子的实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
案例：
加padding前：
<style> div { width: 200px; height: 200px; background-color: aquamarine; } </style> <body> <div> 123</div> </body>运行结果：
加padding后：
<style> div { width: 200px; height: 200px; background-color: aquamarine; padding: 20px; } </style> <body> <div> 123</div> </body>运行结果：
宽高都会被padding影响解决方案：
要保证盒子跟效果图大小保证一致，则让width/height减去多出来的内边距大小即可。
<style> div { width: 160px;/*这句话很重要*/ height: 160px;/*这句话也很重要*/ background-color: aquamarine; padding: 20px; } </style> <body> <div> 123</div> </body>运行结果：
padding不会撑开盒子的情况如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小。
<style> h1 { height: 200px; background-color: blue; padding: 20px; } </style> <body> <h1></h1> </body>运行结果： 可以得出如果设置height，padding就会撑大盒子，而没有设置width，盒子并不会被撑大，保持与父级宽度相同（body既浏览器宽度）
包含孩子的盒子：
1. 不为孩子标签设置宽度：
<style> div { width: 400px; height: 150px; background-color: chartreuse; } div p { padding: 20px; background-color: tomato; } </style> <body> <div> <p></p> </div> </body>p标签不设置宽度时，运行出来p的宽度400px，高度为40px。
（因为p是一个块元素 宽度默认为父级宽度即400px，而高度会被padding撑开为40px 但一般情况下不会撑开盒子）
2. 为孩子标签设置宽度：
<style> div { width: 400px; height: 150px; background-color: chartreuse; } div p { width: 100%;/*为 p设置宽度*/ padding: 20px; background-color: tomato; } </style> <body> <div> <p></p> </div> </body>p标签设置宽度时，运行出来p的宽度440px，高度为40px。
（当对p标签设置宽度后盒子会被撑开，宽度为440px，高度还是会被padding撑开为40px）
padding应用——影响盒子好处padding内边距可以撑开盒子所以在导航栏的应用中，由于每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度，直接用padding撑开盒子最合适，可以保证每个盒子的字都可以居中显示。
示例图： 代码：
<style> .nav { border-top: 3px solid #ff8500; height: 41px; border-bottom: 1px solid #edeef0; }/* 大框架 */ .nav a { display: inline-block; text-decoration: none; color: #4c4c4c; font-size: 14px; line-height: 41px; padding: 0 50px;/* 重点！！！！！！！！！！ */ }/* 导航内文字 */ .nav a:hover { background-color: aliceblue; color: #ff8500; }/* 链接伪类 */ </style> <body> <div class="nav"> <a href="">设为首页</a> <a href="">手机新浪网</a> <a href="">移动客户端</a> <a href="">博客</a> <a href="">微博</a> <a href="">关注我</a> </div> </body>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
