这篇文章主要介绍了DIV间距设置的技巧有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇DIV间距设置的技巧有哪些文章都会有所收获，下面我们一起来看看吧。
DIV之间距离
让两个上下结构DIV块距离为零，通常新手在制作DIV CSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。
如上下结构的2个box DIV块，中间有一定间距无法消除
在CSS里设置DIV标签各属性参数为0
div{margin:0;border:0;padding:0;}
这里就设置了DIV标签CSS属性相当于初始化了DIV标签CSS属性，这里设置margin外边距为0；边框border属性为0和内补白也为0；这样相当于就初始化了DIV盒子之间距各属性距离为0，这样就不会造成DIV直接有一定的距离。
以上是使用CSS清除盒子之间距离。接下来为大家介绍设置盒子之间间距。
使用CSS样式单词为margin（可进入CSS margin教程了解详细使用方法）。
1、设置对象的上下间距
.亿速云-a{margin:10px 0}设置“亿速云-a”对象上下间距为10px,左右为0
2、设置对象左右距离
.亿速云-b{margin:0 8px}设置“亿速云-b”对象上下间距为0,左右为8px
3、设置DIV盒子与上方相邻间距
.亿速云-c{margin-top:10px}设置“亿速云-c”对象与上方相邻间距为10px
4、设置DIV盒子与下方相邻距离
.亿速云-d{margin-bottom:10px}设置“亿速云-d”对象与下方相邻间距为10px
5、设置DIV盒子与左方相邻间距
.亿速云-e{margin-left:9px}设置“亿速云-e”对象与左侧方相邻间距为9px
6、设置盒子与右方相邻距离
.亿速云-f{margin-right:12px}设置“亿速云-f”对象与右方相邻间距为12px
以上我们为了方便介绍margin设置对象外间距，将对象分别CSS命名为".亿速云-a"至“.亿速云-f”,实际使用时候更加需求命名。
解决方法与技巧：
一般我们使用float 浮动属性（float:left（局左）、float:right（居右））来解决此问题。这样的布局一般总的宽度一定，只需左、右内容DIV宽度设置小于总宽度即可实现，注意的是宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成。
提示：在DIV CSS制作中很多时候需要计算的如这样的布局。
实现以上效果，提示总宽度为200px,而左右布局都有边框并中间间隔一定距离，这里为了样式所以距离设置比较大。
CSS代码：
.div-c{width:200px;} .div-a{ float:left; width:50px; border:1px solid #999; height:60px;} .div-b{ float:right; width:120px; border:1px solid #999; height:60px;}Html代码：
<div class="div-c"> <div class="div-a"></div> <div class="div-b"></div> </div>
完整DIV+CSS代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIVCSS5案例</title> <!-- www.亿速云.com --> <style type="text/css"> .div-c{width:200px;} .div-a{ float:left; width:50px; border:1px solid #999; height:60px;} .div-b{ float:right; width:120px; border:1px solid #999; height:60px;} </style> </head> <body> <div class="div-c"> <div class="div-a"></div> <div class="div-b"></div> </div> </body> </html>说明：
1、实现设置总宽度为200px的(div-c)，左右DIV使用了float:left左浮动（局左）和float:right右浮动（局右），分别设置边框和宽度
2、这里设置左右DIV块(即div-a和div-b)总宽度+边框小于总宽度(即div-c对象宽度)
关于“DIV间距设置的技巧有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“DIV间距设置的技巧有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
