内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
内边距属性简写
当我们给盒子指定padding值后，发生2件事：
- 1.内容和边框有了距离，添加了内边距；
- 2.padding影响了盒子实际大小。
- 也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
- （给了宽度，在padding-left会把盒子撑开，盒子大小会变；同理给了高度在写padding-top，也会把盒子撑开
- 若只给了高度或没有给高度，写padding-left不会讲盒子撑开）
**注意**
- padding内边距可以撑开盒子，我们可以巧妙运用。
- 因为每个导航栏里面的数字不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适
- 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
- 只指定高度不给盒子指定宽度，默认和父亲一样宽，若设置宽度为width：100%；则盒子的宽度会超过父亲的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用内边框撑起盒子</title>
<style>
.nav {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
height: 41px;
background-color: #fcfcfc;
color: #4c4c4c;
line-height: 41px; /*文字垂直对齐*/
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 14px;
color: #4c4c4c;
text-decoration: none;
}
a:hover {
background-color: #eee;
color: #ff8500;
}
.test {
height: 100px;
background-color: pink;
}
/*没有指定width/height，padding不会撑开盒子大小
.in-test {
padding: 10px;
background-color: skyblue;
}*/
.test .in-test {
height: 30px; /*指定宽度，盒子将会被padding撑开*/
width: 100%; /*不指定宽度，盒子宽度与父亲宽度一样（=test=浏览器默认宽度），
若指定100%则会超出父亲宽度20px；*/
padding: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
</body>
<div class="nav">
<a href="#">新浪微博</a>
<a href="#">微博</a>
<a href="#">客户端</a>
<a href="#">新浪微博手机</a>
</div>
<div class="test">
<div class="in-test">我是test里面的盒子</div>
</div>
</html>
