本帖最后由 Amy 于 2018-11-30 16:20 编辑
【零基础学习web前端】CSS中margin和padding的区别
【零基础学习web前端】教程目录导航 http://www.sufeinet.com/thread-24027-1-1.html
padding是控件的内容相对控件的边缘的边距,即内边框;margin是控件边缘相对父空间的边距,即外边框。
设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面。
例:
HTML
[HTML] 纯文本查看 复制代码 <html>
<div class="box">
<div class="main"></div>
</div>
<html>
css样式
[CSS] 纯文本查看 复制代码 html{
background: #bce4ff
}
.box{
width: 200px;
height: 200px;
background: #4777de;
padding:50px;
margin: 50px;
}
.main{
width: 100%;
height: 100%;
background: #fff;
}
效果:
图解看一下就更清楚了:
提示:
- 内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
- 外边距可以是负值,而且在很多情况下都要使用负值的外边距。
|