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。
原文地址:http://www.cnblogs.com/eczhou/archive/2012/03/04/2379727.html
相关推荐
点击事件触发,交换两个div的位置,呃。。其实方法很简单的
可以在一同页使用多个移动块,由于使用类设计,有效地避免变量命名的冲突问题。
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow...
两个DIV同一行显示。也可以调整样式使其纵向排列。
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。...4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
运用div布局,两个div拉伸一个变大一个变小,实现左侧导航栏显示/隐藏功能
可折叠DIV块
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
JQuery、JS做上下可收缩的div模块,样式美观,十分好用。
html div 自适应剧中 上下左右全部居中
DIV层上下移动
在jsp中利用单选按钮实现两个div之间的显示与隐藏
DIV+CSS上下左右绝对居中
css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)
Jquery实现div左右上下收缩,文档中包含上下收缩,左右收缩
jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 代码如下: *{ ...
两个常用的DIV弹出层效果代码
一个简单的javascript小程序,用于网页设计中的div移动块、窗口、广告栏等。
div全部自适应,上下结构,左右结构,全部100%自适应浏览器
jQuery 实现两个div颜色互换的动画