文档章节

前端——设置2个div之间的距离

coolrp
 coolrp
发布于 2016/08/14 16:18
字数 397
阅读 126
收藏 0

让上下两个DIV块之间有一定距离或没有距离

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

本文转载自:

coolrp
粉丝 10
博文 42
码字总数 7333
作品 0
襄阳
程序员
私信 提问
[布局概念] 关于CSS-BFC深入理解

写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本...

OB丶Koro1
2017/05/04
0
0
提高Interface Builder高效工作的8个技巧

使view的Size与view中的Content相适应 很惭愧的是最近才发现这个功能——能节约大量时间。 选中任意的一个view,然后Editor->Size to Fit Content,或者简单的按 ⌘= 接着就会按照下面的规则...

Leon_wy
2014/03/19
213
0
CSS深入理解:overflow:hidden——溢出,坍塌,清除浮动

overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章...

lakey0126
2018/08/03
0
0
(JQuery学习笔记)利用jquery制作网页导航定位

我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品。那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息。例如图中所示,左侧是商品列表,右侧是...

w1sw
2016/08/02
0
0
物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung
2014/12/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【Go专家编程】defer这里有个坑

前言 项目中,有时为了让程序更健壮,也即不panic,我们或许会使用recover()来接收异常并处理。 比如以下代码: func NoPanic() {if err := recover(); err != nil {fmt.Println("Recov...

恋恋美食
19分钟前
2
0
20190920笔记

扩展: bashrc和bash_profile http://ask.apelearn.com/question/7719 http://www.joshstaiger.org/archives/2005/07/bash_profile_vs.html echo 颜色 http://www.cnblogs.com/lr-ting/archi......

徐-锐
34分钟前
1
0
Shiro整合Redis代码解读

1. shiro默认使用的MemoryConstrainedCacheManager创建MapCache来保存缓存数据。manager和cache对象之间的关系可以参考笔者的另一篇文章,Springboot Redis详解。 2. shiro整合Redis的关键就...

sunranhou
58分钟前
4
0
关闭服务

题目要求 在centos6系统里,我们可以使用ntsysv关闭不需要开机启动的服务,当然也可以使用chkconfig工具来实现。 写一个shell脚本,用chkconfig工具把不常用的服务关闭。脚本需要写成交互式的...

wzb88
今天
6
0
面试官:兄弟,说说 Spring Cloud 的核心架构原理吧

最近在补一些分布式系列的面试内容,提前几个月做做准备吧,你们懂的,也跟大家分享分享。现在分布式系统基本上都是标配了,如果你现在还在玩儿单机,没有接触过这些东西的话,权当是为你打开...

咪咪家的汪汪
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部