12-13 距离产生美 - 使用margin为盒子设置外边距(边界)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

距离产生美 - 使用margin为盒子设置外边距(边界)

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

div{margin:20px 10px 15px 30px;}

效果:

也可以分开写:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

总结一下:padding和margin的区别,padding在边框里,margin在边框外。

 

任务

我来试一试:

为id名称为box1的div元素加入30像素的左边距

 

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>边距</title>
  7. <style type="text/css">
  8. div {
  9. width: 300px;
  10. height: 300px;
  11. border: 1px solid red;
  12. }
  13.  
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <div id="box1">box1</div>
  19. <div id="box2">box2</div>
  20. </body>
  21.  
  22. </html>
下一节