CSS-margin和padding样式属性
文章目录
外边距
准备
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .in{ border: 1px solid black; height: 100px; width: 100px; } </style> </head> <body> <div> <div class="in" style="background-color: red;"> </div> <div class="in" style="background-color: green;"></div> <div class="in" style="background-color: yellow;"></div> </div> </body> </html>
margin
- 外边距可以设置1到4个值
一个值
只有一个值的时候是把四周都设为同样的外边距
- 在中间绿色的div标签中设置margin样式属性
... <div> <div class="in" style="background-color: red;"> </div> <!--设置margin样式属性--> <div class="in" style="background-color: green;margin: 20px;"></div> <div class="in" style="background-color: yellow;"> </div> </div> ...
两个值
两个值对应的第一个值是上下外边距，第二个是左右外边距
- 在中间绿色的div标签中设置margin样式属性
<div> <div class="in" style="background-color: red;"> </div> <!--设置margin样式属性上下为40px，左右为20px--> <div class="in" style="background-color: green;margin: 40px 20px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
三个值
三个值对应的第一个值是上外边距，第二个是左右外边距，第三个是下外边距
- 在中间绿色的div标签中设置margin样式属性
<div> <div class="in" style="background-color: red;"> </div> <!--设置margin样式属性上外边距为40px，左右外边距为10px，下外边距为60px--> <div class="in" style="background-color: green;margin: 40px 10px 60px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
四个值
四个值对应的为顺时针方向，依次为上右下左外边距
- 在中间绿色的div标签中设置margin样式属性
<div> <div class="in" style="background-color: red;"> </div> <!--设置margin样式属性,上右下左外边距依次为10px,20px,40px,60px--> <div class="in" style="background-color: green;margin: 10px 20px 40px 60px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
margin-top
设置上外边距
<div> <div class="in" style="background-color: red;"> </div> <div class="in" style="background-color: green;margin-top: 10px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
margin-right
设置右外边距
<div> <div class="in" style="background-color: red;"> </div> <div class="in" style="background-color: green;margin-right: 10px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
- 设置右边距效果不太明显，使用Chrome浏览器的F12可以查看它的属性，可以看到这里已经把右边距设置为了10px
margin-bottom
设置下外边距
<div> <div class="in" style="background-color: red;"> </div> <div class="in" style="background-color: green;margin-bottom: 10px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
margin-left
设置左外边距
<div> <div class="in" style="background-color: red;"> </div> <div class="in" style="background-color: green;margin-left: 10px;"></div> <div class="in" style="background-color: yellow;"> </div> </div>
内边距
- 内边距和外边距很像所以这里不逐个演示，这里只演示padding样式四个值的情况和padding-left
准备
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #out{ border: 1px solid black; height: 300px; width: 300px; } .in{ height: 100px; width: 100px; } </style> </head> <body> <div id="out"> <div class="in" style="background-color: red;"> </div> <div class="in" style="background-color: green;"></div> <div class="in" style="background-color: yellow;"></div> </div> </body> </html>
结果
padding
- 内边距也可以设置一到四个值，和margin类似
一个值
只有一个值的时候是把四周都设为同样的外边距
两个值
有两个值的时候是第一个值为上下内边距，第二个值为左右内边距
三个值
三个值为第一个值为上内边距，第二个值为左右内边距，第三个值为下内边距
四个值
四个值的时候，为顺时针顺序指定，上右下左。
#out{
border: 1px solid black;
height: 300px;
width: 300px;
padding: 10px 20px 30px 40px;
}
结果
使用浏览器的F12查看
padding-top
指定上内边距
padding-right
指定右内边距
padding-bottom
指定下内边距
padding-left
指定左内边距
#out{
border: 1px solid black;
height: 300px;
width: 300px;
padding-left: 30px;
}
注意
- 设置内边距的时候会改变块级元素的大小
- 使用margin: 0 auto;可以设置居中