范仁义css3课程---10、内边距

一、总结

一句话总结：

内边距用padding属性来设置，例如padding:25px;，也可以用padding-left（right、top、bottom）分别设置四个边的内边距。padding属性非常常用。

二、内边距

博客对应课程的视频位置：10、内边距
https://fanrenyi.com/video/10/40

1、盒模型

2、内边距padding

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

3、四个方向的内边距

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px

4、内边距的缩写值

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

5、盒子的真正的宽度和高度计算

宽度：内容宽度 + 左右内边距 + 左右边框宽度

高度：内容高度 + 上下内边距 + 上下边框高度

6、注意

padding的颜色会被盒子的背景色所改变

内边距会影响盒子的可见框的大小

三、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>内边距</title>
 6     <style>
 7         .box1{
 8             width: 200px;
 9             height: 200px;
10             border: 1px solid red;
11             /*padding: 20px;*/
12             /*padding-left:15px ;*/
13             /*padding-top: 25px;*/
14             /*padding-right: 35px;*/
15             padding: 15px;
16             background-color: coral;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box1">
22         以退为进，以空为乐，以无为有，以舍为得。
23     </div>
24 </body>
25 </html>

参考：

菜鸟学院：css、css3手册：https://www.runoob.com/css/css-tutorial.html