内边距(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>