12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距(填充)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

宰相肚里能撑船 - 使用padding为盒子设置内边距(填充)

元素内容边框之间是可以设置距离的,称之为“内边距(填充)”。填充也可分为上、右、下、左(顺时针)。如下代码:

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

效果:

顺序一定不要搞混。可以分开写上面代码:

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

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

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

div{padding:10px 20px;}

 

任务

我来试一试:

给div元素设置内边距(填充)10px

 

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