DIV间距设置的技巧有哪些

这篇文章主要介绍了DIV间距设置的技巧有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇DIV间距设置的技巧有哪些文章都会有所收获，下面我们一起来看看吧。

洛扎网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

一、消除上下结构距离

DIV之间距离
让两个上下结构DIV块距离为零，通常新手在制作DIV CSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。
如上下结构的2个box DIV块，中间有一定间距无法消除

二、清除DIV间距解决方法 

在CSS里设置DIV标签各属性参数为0
div{margin:0;border:0;padding:0;}
这里就设置了DIV标签CSS属性相当于初始化了DIV标签CSS属性，这里设置margin外边距为0；边框border属性为0和内补白也为0；这样相当于就初始化了DIV盒子之间距各属性距离为0，这样就不会造成DIV直接有一定的距离。

三、设置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代码：