CSS盒子内边距
这一节我们开始介绍内边距（Padding）。
内边距（Padding）属性用于设置内边距，内边距是指边框与显示内容之间的距离。
【例子】
默认情况下边框和内容紧挨着的；
这里我们设置“padding: 10px;”，发现上下左右都有了10像素的间距；
和上一节的边框一样，内边距同样分上下左右：
padding-top:上内边距padding-bottom:下内边距padding-right:右内边距padding-left:左内边距
【综合案例】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>内边距-导航栏案例</title><style>.nav {/*width: 100px; 不可以给宽度*/height: 50px;border-top: 3px solid #FF8500;border-bottom: 1px solid #EDEEF0;background-color: #FCFCFC;}.nav a {height: 50px; /*行高*/display: inline-block; /*转换*/line-height: 50px; /*垂直居中*/color: #4c4c4c; /*内容字体颜色*/text-decoration: none; /*不需要链接下划线*/padding-right: 18px; /*右内边距*/padding-left: 18px; /*左内边距*/font-size: 14px; /*字体大小*/}.nav a:hover {background-color: #edeef0; /*鼠标经过变背景色*/color: #ff8400; /*鼠标经过变字体色*/} </style></head><body> <div class="nav"><a href="#">首页</a><a href="#">移动客户端</a><a href="#">设为首页</a><a href="#">收藏夹</a></div></body></html>
这里需要注意的是，后面跟几个数值表示的意思是不同的。
所以上面例子里面的写法：
padding-right: 18px; /*右内边距*/
padding-left: 18px; /*左内边距*/
可以更改为：
padding: 0 18px; /* 左右内边距为18px */
尤其值得需要注意的是内边距的计算，一般而言盒子的大小都是固定的，比如下面的一个例子，在300px*300px的盒子里面垂直居中放置一个200px*200px的盒子，该如何实现呢？
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>内边距计算</title><style>.father {width: 180px; height: 180px;background-color: yellow;padding-left: 100px;padding-top: 100px;border: 10px solid red;}.son {width: 100px; height: 100px;background-color: pink;}</style></head><body> <div class="father"><div class="son"></div></div></body></html>
