11-9盒模型--填充 · 初识HTML+CSS

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： ~~~ 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.在右边编辑器的第10行，输入： ~~~ padding:10px; ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>填充</title> <style type="text/css"> #box1{ width:100px; height:100px; border:1px solid red; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html> ```