设置了相对定位relative之后,改变top值,如何去掉多余空白?
2024-10-19 16:43:35
众所周知,relative和absolute有一个区别在于relative是相对自身定位,而absolute是相对于最近的定位父级定位,而此时的相对定位经过top值改变其在文档流中的位置之后,自身本来的位置依然在文档流中占据位置。
要想解决这个问题,我的想法就是给个margin负值,以减少下方的空白
<body>
<!-- 此时div占据的位置是他自身的高度加上top值为110px -->
<div style="width:100px;height:100px;border:1px solid red;position:relative;top:10px">
</div>
</body>
解决这个问题
/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/
div{
margin-top:-10px;
}
例:
<body>
<!-- 此时div占据的位置是他自身的高度加上bottom值为110px -->
<div
style=" width:100px;
height:100px;
border:1px solid red;
position:relative;
bottom:10px"
>
</div>
</body>
解决:
/*给div设置一个margin负值删除自身最初在文档流中留下的空白*/
div{
margin-bottom:-10px;
}
最新文章
- mac mysql cmd
- django中使用Profile扩展User模块(基于django 1.10版本下)
- wpf读取mysql字段类型为text的问题
- Shape comparison language
- 《TCP/IP详解卷1:协议》第17、18章 TCP:传输控制协议(1)-读书笔记
- SQL中char、varchar、nvarchar的区别(zhuan)
- flex&;bison 1
- VS2012 中使用Emacs布局
- LeetCode_String to Integer (atoi)
- oc 根据文件路径获取文件大小
- Oratop工具——实时数据库性能监控工具
- src设置变量
- C++第一篇--类的引入
- mycat入门_介绍与安装
- Bool的转录功能
- java 中int与integer的区别
- nginx:location指令中的正则表达式
- CF1101G (Zero XOR Subset)-less 线性基
- Centos6.5网络配置
- 使用java.util.LinkedList模拟实现内存页面置换算法--LRU算法
热门文章
- Java学习笔记(5)--- Number类和Math 类,String类的应用,Java数组入门
- Codeforces Round #578 (Div. 2)
- 一、itk在VS2019上面的安装 和例子(HelloWorld)运行
- linux 安装程序的方式
- 手摸手教你bootstrap定制
- 为什么不允许使用 Java 静态构造函数?
- SQL --- where 1=1 与 1<;>; 1
- 【CF933E】A Preponderant Reunion(动态规划)
- [转]Apache Doris资料汇总
- git基本操作:分支管理