<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color:gold; /*margin: 50px auto 60px auto;*/ /*auto 设置左右两个则会自动计算, 把两边相加除以二----------!水平!居中*/ margin: 50px auto 100px; /*简写*/ /*margin可以设置负值,用于元素位移以及边框合并*/ /*padding-left:20px;*/ /*左面距离可以直接使用首行缩进来替代, 可以省去计算width的步骤*/ /*首行缩进需要添加在div里,不能添加在字段内*/ text-indent: 20px; } </style> </head> <body> box想要完全贴边,需要解决body的8像素的margin <br> 在ul标签里面,自带margin和padding值,所以要通过重新设置来覆盖 <br> 在一般情况下,发现元素并没有按照自己的想象所排列,就需要判断是否有自带margin或padding值.<br> 直接通过浏览器的元素检查,能够看到每个元素占据多少像素,从而进行更改. <div class="box"> <!-- body自身带8px的边. --> <!-- box想要完全贴边,需要解决body的8像素的margin --> 左面距离可以直接使用首行缩进来替代, 可以省去计算width的步骤 <div class="box01"> <div>margin可以设置负值,用于元素位移以及边框合并</div> <div></div> <div></div> <div></div> <div class="last"> </div> </div> </div> </body> </html>