首页 > 其他分享 >HTML中让上下两个div之间保持一定距离或没有距离

HTML中让上下两个div之间保持一定距离或没有距离

时间:2023-05-28 12:11:25浏览次数:62  
标签:距离 HTML 上下 div margin DIV 属性

这篇文章主要为大家详细介绍了HTML 让上下两个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。注:关于HTML 让上下两个DIV之间保持一定距离或没有距离的内容就先介绍到这里

标签:距离,HTML,上下,div,margin,DIV,属性
From: https://www.cnblogs.com/mswx/p/17438064.html

相关文章

  • html基础速成(1)
    <!DOCTYPEhtml>声明为HTML5文档#放在开头<html>页面的根元素#第一层</html><metacharset="utf-8">定义网页编码格式为utf-8(放在<head></head>内)<title>描述了文档的标题</title><head>包含文档元数据</head><body>包含了可见的页面内容<......
  • html 学习笔记
    目录基础知识斜体强调行内容着重强调空元素插入图片的示例添加超链接属性布尔属性禁用表单输入剖析HTML文档头(head)在搜索引擎中description的使用在头里引用CSS文件在头里引用JavaScript文件创建超链接使用title属性添加支持信息这里有统一资源定位符(URL)与路径(path)快速入......
  • #295. 「BJWC2010」矩阵距离 题解 2021-09-23 21:42:32
    #295.「BJWC2010」矩阵距离又是一道需要真正思考了才可以做出来的水题。题目描述给出一个N*M的01矩阵,输出每个0到离这个点最近的1的距离。思考历程暴力由于$N\le10^3$如果在赛场上出现这个题,我们优先考虑暴力。暴力也是很简单,从每个为0的点出发bfs找到与最近的......
  • HTML入门笔记1
    一、HTML是谁发明的?1990年TimBernersLee发明了www(worldwideweb万维网),为了方面人们于阅读网页,与此同时自己又发明了HTML、HTTP、URL;用自己写的浏览器去访问自己写的服务器,这就是如今人们上网访问网页的起源和雏形。二、HTML起手应该写甚么?三、常用的表章节的标签h1-h6......
  • https:imnks.com369.html hosts处理
    https:imnks.com369.htmlhosts处理sudo-i#手动筛选的ip,2022.11.1更新curlhttp://code.imnks.com/hosts.sh|bash#自动筛选的ipcurlhttp://code.imnks.com/hosts-auto.sh|bash​​......
  • html文件minify
    为了对quarto产生的单个html文件进行精简压缩,笔者试用了如下几种工具:parcel、minify、minify-html进行试验,结果parcel不能正常工作,因文件中有require第三方库;minify-html效果比较差;minify效果不错,但仍有提高空间,js中的注释仍有少量保留。......
  • html在移动端滑动无效的解决方法
    排查下是否有类似touchmove类似的事件绑定,可能就是其中取消了默认的事件行为。解决方法,在你想滚动的直接父级元素上添加@touchmove.stop="voidnull"类似的事件绑定应该就可以解决了。这里利用了事件冒泡终止的方式。......
  • Educational Codeforces Round 149 (Rated for Div. 2)(A~F)
    A.GrasshopperonaLine题意:给出n,k,从0开始,每次可以加一个数,最快到达n需要,输出首先跳几次,然后每次跳多少,限制只有一个跳的长度不能整除k。分析:n%k,有余直接跳,没余数,先跳一个,再跳剩余的长度。代码:#include<cstring>#include<iostream>#include<algorithm>usingnamespac......
  • 29. Divide Two Integers刷题笔记
    参考的题解classSolution:defdivide(self,dividend:int,divisor:int)->int:positive=(dividend<0)is(divisor<0)dividend,divisor=abs(dividend),abs(divisor)res=0whiledividend>=divisor:......
  • 远距离数据采集,来一个远程 IO模块搞定!
    远程IO模块主要用于工业现场采集模拟信号和数字信号,而且还可以输出模拟信号和数字信号来控制设备。可以扩展PLC、采集仪器仪表等数据处理设备的输入和输出口,比如一个PLC只有有10个模拟输入接口,但是现场需要采集30个模拟量,就需要加入远程IO扩展。还有,由于设备和主控PLC或工控机可能......