您的位置:首页 > CSS技巧 > 【 返回上一页

html中div间距CSS样式布局设置

html网页布局中DIV间距是遇到常见布局排版,通过css样式实现不同场景的div之间间距布局,比如有div左右间距,上下结构div间距。布局间距也是方法多种,可以使用margin外间距(外补白)样式,可使用padding内间距(内补白)样式,也可以使用float浮动(div靠左div靠右)样式实现。不同场景选择不同css属性布局,需要丰富div css布局开发经验积累,这里thinkcss为大家介绍这三种样式布局方法。

div间距应用场景
碰到div间距应用场景

从上图看到采用div布局左右结构、上下结构的间隔距离,均使用css布局。

一、float实现左右结构div间距

左右结构布局,通常我们采用float:leftfloat:right实现,控制设置好左右div分别的宽度,需要注意宽度要计算好。

1、直接看代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构两个DIV之间间距20px www.thinkcss.com</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
利用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之间间距排版 www.thinkcss.com</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、效果

padding实现左右、上下间距效果
css padding实现左右、上下间距效果

3、分析小结:这里采用padding实现div间距排版,要求是布局div盒子间距实现内容之间间距,这个时候基本需要两个div之间没有边框,同时没有背景差距,虽然使用padding布局间隔效果实际上两个div是紧贴的,只是借用padding边框与内容之间补白间距,没有背景没有边框差距,实现div之间需求的间距效果。

三、margin实现html div间距

相比padding设置间距,margin设置间距就无需考虑div是否有边框,div之间是否背景不一致,如何条件下都可以使用margin-leftmargin-rightmargin-top、margin-bottom实现需求间距。

1、div间隔实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin实现DIV之间间距排版 www.thinkcss.com</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间距效果

margin实现div间距
css margin实现div间距

3、分析小结:通常div或其他元素之间间距使用margin外布局样式实现,早期浏览器对margin兼容不好会产生双倍值或减少一倍值效果,但现在主流浏览器均已经支持,但也要掌握float和padding布局间距,条件允许还是减少对margin带值应用。使用margin:0 auto的兼容不受影响。

总结:无论什么排版下选择什么CSS属性布局,最终还是灵活使用,以简单方便为主实现div之间间隔间距的布局要求。

相关标签: 间距 间隔
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/1409.shtml

日期:2017-08-30 11:42:25 来源:css学习与资料网 作者:thinkcss原创

热门点击