div是HTML中基础的常用的一个元素，因为使用的普遍性和特殊性使得有很多div和规则样式来修饰，这里我就说说通过CSS的来设置div的外边距
工具/原料
CSS基础
HTML基础
UE编辑器
方法/步骤
1、首先我来创建一个div的区块，设置height：150px,width:150px;在div中输入提示文字，具体的代码如下：<html> <head> <title>div和边距</title> <styletype="text/css"> #contion{ background:orange; border:1pxsolidred; height:150px; width:150px; } </style> </head> <body> <divid="contion"> 我是div </div> </body></html>具体的效果如下图所示，可以看到一个矩形的黄色背景的区块。
2、我们使用左边的外边距属性值为auto,来看看效果，具体的代码如下：<html> <head> <title>div和边距</title> <styletype="text/css"> #contion{ background:orange; border:1pxsolidred; height:150px; width:150px; margin-left:auto; } </style> </head> <body> <divid="contion"> 我是div </div> </body></html>通过执行结果，发现这个区块在右边来了，这是为什么呢？设置auto的意思就是左边自动扩展，所以到右边了。
3、我们可以使用固定的值来设置这个区块看离左边固定像素位置，具体的代码如下：<html> <head> <title>div和边距</title> <styletype="text/css"> #contion{ background:orange; border:1pxsolidred; height:150px; width:150px; margin-left:100px;; } </style> </head> <body> <divid="contion"> 我是div </div> </body></html>具体的效果如下图所示，这个区块离左边100px的位置显示了。
4、如果我们左边和右边都自动是什么个情况呢螋觏钎厘?具体的来看如下代码：<html> <head> <tit造婷用痃le>div和边距</title> <styletype="text/css"> #contion{ background:orange; border:1pxsolidred; height:150px; width:150px; margin-left:auto; margin-right:auto; } </style> </head> <body> <divid="contion"> 我是div </div> </body></html>发现这个区块在浏览器的中间了，因为左边和右边都是自动扩展了，所以都自动的平分了。
5、我们螅岔出礤在HTML中需要让区块是从0,0这个像素位置开始的该怎么做呢？具体的代码如下：<html> <head> <title>div和边距&l墉掠载牿t;/title> <styletype="text/css"> body{margin:0;} #contion{ background:orange; border:1pxsolidred; height:150px; width:150px; } </style> </head> <body> <divid="contion"> 我是div </div> </body></html>可以看到body的外边距设置成0px了，所以div框的左上角的左边点为0，0。就有了如下图所示的执行结果。
