本文基于尚硅谷Web前端基础教程发布,你也可以理解成这是一篇尚硅谷教程笔记,当然这里也有我的一些经验总结
内边距
podding
顾名思义就是内容区与边框之间的距离称为内边距,这里一共有四个方向的内边距分别是
- podding-top
- podding-right
- podding-bottom
- podding-left
同样也可以简写成 podding: xxx xxx xxx xxx;
顺序同样是上右下左而内边距的大小会影响到盒子的大小所以一个盒子的大小应该是内容区和内边距,边框三个元素一起决定的即
border + podding + margin;
外边距
margin
外边距即一个盒模型和另一个盒子之间的距离,也是一共有四个方向只是运动方向相反且默认设置正值
margin-top
- 向上的距离,物体向下移动
margin-right
- 默认下的不产生效果
margin-bottom
- 下边距,其下边的元素向下移动
margin-left
- 左边距,元素向右移动
外边距的简写与内边距相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* 以下为边框部分的样式 */
border: 20px red solid;
margin: 10px 20px 30px 40px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
/* 以下为边框部分的样式 */
border: 20px red solid;
margin: 10px 20px 30px 40px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>