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. Django之模型管理器filter处理问题

    今天上班第一天,恭祝所有朋友新年快乐!! 最近在github上发现一个还不错的基于Django的开源博客项目,不过也许是版本原因,其中代码存在着些许问题,今天主要记录下其中的模型处理方法的部分. 这段 ...

  2. Regmon7.04绿色版(注册表变动实时监视工具)

    Regmon V7.04 简繁中文绿色版 软件大小: 155KB软件语言: 简体中文运行环境:Win9x/NT/2000/XP/2003/软件类别:国外软件 / 免费版 / 系统其它Regmon Re ...

  3. openstack 装逼之路~openstack各组件关系

    先来张图

  4. intellig idea 快捷键

    可以在设置中更改为 eclipse 风格的快捷键. 默认 按住 ctlr + 左键,会调整到对应的声明处, 如果有实现类,eclipse中给予了选择. 在idea 中如果想直接调整到实现类,那么采用快 ...

  5. JAVA MONGODB group查询的UTC时间问题

    BasicDBList dateList = new BasicDBList(); dateList.add("$t"); dateList.add(28800000); DBOb ...

  6. fork()子进程与waitpid()

    #!/usr/bin/perl use warnings; use strict; use POSIX ":sys_wait_h"; $SIG{CHLD} = sub{ my $p ...

  7. scala优点以及eclipse上安装scala插件

    可拓展 (面向对象,函数式编程) 静态类型化 (可检验,安全重构) 兼容JAVA (类库调用,互操作) 支持并发控制 (强计算能力,自定义其他控制结构) 语法简洁 (代码行短,类型推断,抽象控制) 插 ...

  8. KVM guest caching modes

    kvm中host和guest各自维护自己的page caches,使得内存中有两份缓存数据.host的缓存为page cache可以理解为读缓存,guest的缓存为disk write cache,可 ...

  9. Android内存泄漏检测利器：LeakCanary

    Android内存泄漏检测利器:LeakCanary MAR 28TH, 2016 是什么? 一言以蔽之:LeakCanary是一个傻瓜化并且可视化的内存泄露分析工具 为什么需要LeakCanary? ...

  10. 《JavaScript高级程序设计》读书笔记 ---Object 类型

    引用类型的值(对象)是引用类型的一个实例.在ECMAScript 中,引用类型是一种数据结构,用于将数据和功能组织在一起.它也常被称为类,但这种称呼并不妥当.尽管ECMAScript从技术上讲是一门面 ...