DIV间距设置
作者:李明照文章来源:河南新华电脑学院
一、消除上下结构- TOP
DIV之间距离
让两个上下结构DIV块距离为零,通常新手在制作DIV CSS页面的时候,不会考虑到初始化CSS属性,这样各标签属性默认的CSS属性将会造成错位、兼容等问题。
如上下结构的2个box DIV块,中间有一定间距无法消除
解决方法: - TOP
在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属性、常用网页标签初始化一下。
CSS初始化技巧地址:plate/
二、让左右结构内容之间有一定距离- TOP
如上图,左右结构内容之间一定距离设置技巧
解决方法与技巧:
一般我们使用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>
<!-- -->
<style type="text/css">
.div-c{width:200px;}
.div-a{ float:left; width:
DIV间距设置 来自淘豆网m.daumloan.com转载请标明出处.
