用途:默认的盒子内容紧贴盒子边缘
padding属性就是指让让盒子里面的内容与边框产生距离。
padding属性及注意点
padding基本用法
<style>
div {
width: 200px;
height: 400px;
padding-left: 20px;
}
</style>
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下內边距 |
内边距的复合型写法:
padding:5px;
/* 1个值,代表上下左右都有5像素内边距; */
padding:5px 10px;
/* 2个值,代表上下内边距是5像素 左右内边距是10像素; */
padding:5px 10px 20px;
/* 3个值,代表上内边距5像素 左右内边距10像素下内边距20像素: */
padding:5px 10px 20px 30px;
/* 4个值,上是5像素 右10像素 下20像素 左是30像素顺时针 */
padding 注意点:
再给盒子指定padding值后影响了实际盒子的大小。
也就是说:内容和边框有了距离撑开了盒子大小。
加padding不会撑开盒子的情况:
盒子本身没有指定width/height的属性
解决方案:
为了保障盒子的大小和效果图一致,就要让width/height减去多出来的内边距大小。
例如:
在上述例子中为让盒子保持200px的高和宽就要
div {
width: 160px;
height: 160px;
padding: 20px;
}
margin的运用及注意点
运用margin让块级盒子水平居中
1,盒子必须制定了就宽度
2,盒子的左右外边距都指定为auto
常见写法(以下三种都可以):
(行内元素或者行内块元素给父级添加text-align:center)
.nav {
width: 200px;
height: 400px;
margin: auto;
/* margin: 0 auto;
margin-left: auto;
margin-right: auto; */
}
嵌套元素塌陷问题
当我们想要实现子盒子相对于父盒子有边距时,
.father {
width: 300px;
height: 300px;
background-color: paleturquoise;
margin-top: 400px;
}
.son {
width: 20px;
height: 55px;
background-color: papayawhip;
margin-top: 300px;
}
运行代码后发现并没有实现想要的效果,原因是两个嵌套关系的块级元素,父子元素同时有上边距时。父元素会塌陷较大的外边距值(比较父子元素的外边距值,谁的大就塌陷那个大的外边距值)
解决方案有三种:
- 为父元素定义一个上边框
- 为父元素定义一个内边距
- 为父元素添加overflow:hidden;