11-10盒模型--边界 · 初识HTML+CSS

元素与其它元素之间的距离可以使用边界（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、在右侧代码编辑器中第12行输入下列代码： ~~~ #box1{margin-bottom:30px;} ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>边距</title> <style type="text/css"> div{ width:300px; height:300px; border:1px solid red; } </style> </head> <body> <div id="box1">box1</div> <div id="box2">box2</div> </body> </html> ```