<!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>
