第十四课 div css当中 DIV内边距和外边距概念讲解

asp老师

好我们分别来看html代码，这个是body 当中的内容；

1. <font size="4"><font size="4">
   
2. <div class="aaa">111</div>
   
3. 
   
4. <div class="bbb">222</div></font></font>

复制代码

好我们来定义下css代码

1. <font size="4"><font size="4">.aaa{background:#099; width:300px; height:200px;}
   
2. .bbb{ background:#F00; width:300px; height:200px;}</font></font>

复制代码

此时效果如下

我们在css代码当中添加了一个margin-bottom:50px; 这个表示的是下面的边距即为-（外边距）
我们来看效果：

同样的如果改为

1. <font size="4"><font size="4">margin-left:50px;</font></font>

复制代码

那么此时的效果如下：

margin-left:50px; 这个表示的外面的左边距；此时我们修改源代码html为;

1. <font size="4">
   
2. </font><blockquote><font size="4"><div class="aaa"></font>

复制代码

css代码为;

1. <blockquote><font size="4">.aaa{background:#099; width:500px; height:300px; }</font>

复制代码

那么效果如下;

我们看到类为.bbb的被类为.aaa的包含进来！此时我们修改css代码为

1. <font size="4">.aaa{background:#099; width:500px; height:300px; padding-left:50px;}
   
2. .bbb{ background:#F00; width:300px; height:100px;}
   
3. </font>

复制代码

此时我们看到这个类为.aaa的 多了一个padding-left:50px; 这个表示什么意识呢？值得是内边距左侧50px，谁在谁的内部，.bbb在.aaa的内部，那么此时我们如果要用内边距padding的话，就应该修改大的那个div的内边距，那么就是这个类为.aaa的css属性！（当然可能会有人讲我单独设置这个类别为.bbb的div的外边距marigin-left:50px; 这样不也是可以的嘛。）


如果我们来写

1. padding:25px 50px 45px 10px;}

复制代码

的这个表示的是内边距为：25px 50px 45px 10px 这个顺序分别是上 右 下 左
如果是2个数值呢：代码如下

1. .aaa{background:#099; width:500px; height:300px; padding:25px 50px }
   
2. .bbb{ background:#F00; width:300px; height:100px; }

复制代码

这个就表示的是，上下是25px 左右是50px

1. .aaa{background:#099; width:500px; height:300px; }
   
2. .bbb{ background:#F00; width:300px; height:100px; margin:25px auto;}

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！

奇睿互联

谢谢 道勤                                            

asp老师

奇睿互联 发表于 2016-10-3 17:27
谢谢 道勤

感谢您的支持