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

2、如果想上下两个DIV间有距离的话，只需设定div中的margin属性即可，本例中div属性对全局DIV块都适用，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">
<!--设置DIV块的边界为5px-->
div{margin:5px;border:0;padding:0;}
#Box1{
    width:200px;
    height:72px;
    background-color:#666;
}
#Box2{
    width:200px;
    height:72px;
    background-color:#F0F;
}
</style>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>让上下两个DIV块之间有一定距离或没有距离</title>
</head>

<body>
<div id="Box1"></div>
<div id="Box2"></div>
</body>

</html>

这里设置了DIV块的边界为5px，当有上下两个DIV块时，边界是重合的，按大的来，所以这里上下两个DIV块的距离是5px（只取其中大的边界值，此处全局设定都是5px）

效果图：

如不想全局设置DIV块之间的边界，可在各个DIV块之间进行单独设置margin。

让上下两个DIV块之间有一定距离或没有距离的更多相关文章

  1. 使用CSS3的translate和transition功能，控制一个两个div块的联动

    之前的工作有接触到一些css3的新特性.div块的移动和回到初始位置,可以利用在开发中的很多地方.这里记录下来,下次就不用辛苦的灾区百度了. <html> <head> < ...

  2. HTML5 的拖放（实例：两个div之间拖放图片）

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...

  3. 页面中多个script块之间的关系

     一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(a ...

  4. 两个div之间有空隙

    加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...

  5. 设置一个DIV块固定在屏幕中央（两种方法）

    设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...

  6. 并排的两个div之间会有空隙

    两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...

  7. 两个div之间的蜜汁间隙

    两个div左右相邻,想让他们紧挨在一起 加了margin:0:padding:0: 不知道为什么还是会有间隙. 然后在两个div的父元素加了:font-size:0: 就终于挨在一起惹.

  8. 关于两个DIV之间的空白字符

    首先!!!!这个问题应该是去面试前端会经常问到的问题!!! 如,下面这个例子: <!DOCTYPE html> <html lang="zh-CN"> &l ...

  9. Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组，可以去掉任意一个元素，问剩余数列的困难值的最小值是多少】

    A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

随机推荐

  1. from表单实现无跳转上传文件，接收页面后台数据。

    本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展,实现页面无跳转表单数据提交,并接收后台返回的数据. 下载好,上一篇文章d ...

  2. 自己通过反射写的一个属性copy类

    package com.xxx.beancopier; import java.lang.annotation.Documented; import java.lang.annotation.Elem ...

  3. Java的关键字和标识符

    1.关键字 Java中共有52个关键字,其中有两个保留字,虽然查到百度百科上说是50个,但是事实确实是有52个(47+3+2). 1.1保留字 Java语言的的保留字是指在Java中商务预留的关键字 ...

  4. bison实例

    逆波兰记号计算器[文件名rpcalc.y]%{ #define YYSTYPE double #include <stdio.h> #include <math.h> #inc ...

  5. Eclipse主题设置

    1. 内部编辑区域主题 Eclipse黑色主题包 下载主题包解压到Eclipse安装目录下的dropins目录,重启Eclipse,Windows—>Preferences—>Genera ...

  6. OGG强制停止进程

    1.异常现象[oracle@localhost ~]$ ggsci Oracle GoldenGate Command Interpreter for OracleVersion 11.1.1.0.0 ...

  7. Python建立SSH连接与使用方法

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 安装过程也比较简单,先安装pycrypto后安装paramiko,解压后在命令提示符下 ...

  8. js--事件对象的理解1

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...

  9. 《JS权威指南学习总结--8.8.3 不完全函数》

    内容要点: 本节讨论的是一种函数变换技巧,即把一次完整的函数调用拆成多次函数调用,每次传入的实参都是完整实参的一部分,每个拆分开的函数叫做不完全函数(partial function),每次函数调用叫 ...

  10. Fedora设置中文

    安装Fedora14时,界面语言是英语,结果忘了修改酿成大祸,hou后面qt怎么改 也显示不出来中文!哎,真是功亏一篑啊差点. 只好手动安装简体中文语言包: 1.打开终端,执行yum install ...