html网页布局中DIV间距是遇到常见布局排版，通过css样式实现不同场景的div之间间距布局，比如有div左右间距，上下结构div间距。布局间距也是方法多种，可以使用margin外间距（外补白）样式，可使用padding内间距（内补白）样式，也可以使用float浮动（div靠左、div靠右）样式实现。不同场景选择不同css属性布局，需要丰富div css布局开发经验积累，这里HTML8为大家介绍这三种样式布局方法。
碰到div间距应用场景
从上图看到采用div布局左右结构、上下结构的间隔距离，均使用css布局。
一、float实现左右结构div间距
左右结构布局，通常我们采用float:left和float:right实现，控制设置好左右div分别的宽度，需要注意宽度要计算好。
1、直接看代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构两个DIV之间间距20px html8.com.cn</title>
<style>
.box{ width:400px; border:1px solid #999; overflow:hidden}
.left{ float:left; width:120px; height:100px; background:#CCC}
.right{ float:right; width:260px; height:100px; background:#06F}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2、效果截图
利用float和宽度实现左右div之间间隔20px
3、分析小结：采用float浮动，实现两个div分别靠左和靠右，也就是紧贴的那个DIV间距，如果这两个div宽度之和小于父级宽度（形成div并排），那么他们之间就会产生间隙，如果他们宽度之和大于父级宽度，他们就会独占占一行错位。这里class=box的父级对象宽度为400px，子级class=left宽度为120px，子级class=right宽度为260px，这样400-120-260=20，这样即可自然两个div之间产生了20px间隔。从而实现div间隔间距。
二、padding实现div间隔效果
无论上下结构还是左右结构紧贴的DIV之间间距，都可以使用padding实现，有时需要注意是，左右或上下间隔的排版是什么样条件，如果没有边框或背景差距，要实现div间隔从而实现内容之间有间隔，这个时候使用padding非常方便的。
1、代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>padding实现DIV之间间距排版 html8.com.cn</title>
<style>
.box{ width:400px; border:1px solid #999; overflow:hidden}
.left{ float:left; width:120px; height:100px; background:#CCC}
.rights{ float:left; padding-left:20px; width:260px; height:100px}
.box2{ padding-top:30px}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="rights">使用padding-left实现左div与右DIV内容间距</div>
</div>
<div class="box2">看看与上一个DIV间距，实现上一个DIV与下一个DIV内容间距效果</div>
</body>
</html>
2、效果
css padding实现左右、上下间距效果
3、分析小结：这里采用padding实现div间距排版，要求是布局div盒子间距实现内容之间间距，这个时候基本需要两个div之间没有边框，同时没有背景差距，虽然使用padding布局间隔效果实际上两个div是紧贴的，只是借用padding边框与内容之间补白间距，没有背景没有边框差距，实现div之间需求的间距效果。
三、margin实现html div间距
相比padding设置间距，margin设置间距就无需考虑div是否有边框，div之间是否背景不一致，如何条件下都可以使用margin-left、margin-right、margin-top、margin-bottom实现需求间距。
1、div间隔实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin实现DIV之间间距排版 html8.com.cn</title>
<style>
.box{ width:400px; border:1px solid #999; overflow:hidden}
.left2{ float:left; width:120px; height:100px; background:#CCC}
.right2{ float:left; margin-left:20px; background:#09F; width:260px; height:100px}
.box3{ margin-top:30px; border:2px solid #F00}
</style>
</head>
<body>
<div class="box">
<div class="left2"></div>
<div class="right2">使用margin-left实现左div与右DIV内容间距</div>
</div>
<div class="box3">margin-top实现上一个DIV与下一个DIV间距效果</div>
</body>
</html>
2、margin div间距效果
css margin实现div间距
3、分析小结：通常div或其他元素之间间距使用margin外布局样式实现，早期浏览器对margin兼容不好会产生双倍值或减少一倍值效果，但现在主流浏览器均已经支持，但也要掌握float和padding布局间距，条件允许还是减少对margin带值应用。使用margin:0 auto的兼容不受影响。
总结：无论什么排版下选择什么CSS属性布局，最终还是灵活使用，以简单方便为主实现div之间间隔间距的布局要求。