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. Grunt使用教程（限winows）

    前提:安装nodejs 一. 打开dos命令窗口,输入命令 "node -v",确认nodejs安装成功 二. 其次,安装grunt-cli (该插件是grunt命令行插件),执行 ...

  2. php 便利数组方法

    数组在PHP中是一个非常强大的武器,用起来方便.容易,由于使用起来异常灵活,用它就可以实现数据结构中的链表.栈.队列.堆以及所谓的字典.集合等,也可以转换成XML格式. 1.使用for for语句遍历 ...

  3. 如何修改tomcat后台console标题（转）

    一个机器启动多个tomcat之后,分不清楚项目之间的区别,通过console口设置一下标题 tomcat控制台改名,修改方法:   1.找到tomcat\bin\catalina.bat   2.找到 ...

  4. python下载时报错 Errno 10060] A connection attempt failed because the connected party did not properly respond after a period of time

    def downloadXml(isExists,filedir,filename): if not isExists: os.mkdir(filedir) local = os.path.join( ...

  5. MVC教程

    http://developer.51cto.com/art/201309/409950_all.htm

  6. Socket 传送文件

    1.传送文本文件 1.1服务端 package com; import java.io.BufferedWriter; import java.io.DataInputStream; import j ...

  7. HTTP中的重定向和请求转发的区别

    原文出处:http://blog.csdn.net/meiyalei/article/details/2129120 一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: reque ...

  8. Webpack学习笔记（一）

    转载http://zhaoda.net/webpack-handbook/module-system.html 转载http://www.cnblogs.com/vajoy/p/4650467.htm ...

  9. scroll、client和offset的区别

    scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html

  10. JS复习：第八章

    一.全局作用域: 所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法.全局变量不能通过delete操作符删除,而window对象上定义的属性可以. 二.窗口大小 使用resizeT ...