margin的BUG(2)
2024-08-26 11:58:55
继续上一次的学习,这次又发现了margin的第二个bug.既当同时对两个相邻的div盒子设置margin时,他们之间的间隙不能正常显示.
具体表述为:先建立两个div1和div2
<div class="div1"></div>
<div class="div2"></div>
div2设置成margin-top,div1设置margin-bottom,代码如下:
.div1{
width: 200px;height: 200px;
background: green;
margin-bottom: 50px;
}
.div2{
width: 200px;height: 200px;
background: blue;
margin-top: 80px;
}
设置背景色和宽高,是为了方便比对观察
那么两者之间的间隙会变成margin-top和margin-bottom比较出来的最大值.
如果真想要间隙进行相加,则应把div2元素变为inline-block,代码如下:
.div2{
width: 200px;height: 200px;
background: blue;
margin-top: 80px;
display:inline-block;
}
将div2转换为内联块属性后,两者之间的间隙就能正常相加而正确显示了.
最新文章
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- 程序中使用ajax时,type为put,或者delete时在 IIS上没效果,发生HTTP Error 405.0 - Method Not Allowed
- 常用的css命名规则:
- 基于zepto的一个日期区间选择插件
- [BZOJ 2631]tree
- 【英语】Bingo口语笔记(44) - 进餐时的表达
- [大牛翻译系列]Hadoop(22)附录D.2 复制连接框架
- iOS的扩展类,扩展属性
- win8.1 usb3 速度慢的解决方法
- spring boot + neo4j restful
- android设置横竖屏
- 洛谷P2689 东南西北
- @ConfigurationProperties 配置详解
- Codeforces Round #545 (Div. 2)(D. Camp Schedule)
- Fiddler抓包2-只抓APP的请求
- go的精选类库
- Struts如何获取客户端ip地址
- 如何创建自己的ruby gem包
- Python实例---抽屉热搜榜前端代码分析
- Java网络编程学习A轮_01_目标与基础复习
热门文章
- yum服务器设置
- Implementing the skip list data structure in java --reference
- Android+Robotium
- CentOS(三)--初识linux的文件系统以及用户组等概念
- Maven中settings.xml的配置项说明
- [BigData]关于Hadoop学习笔记第四天(PPT总结)(一)
- 【KMP原理】【整理回顾】
- 为dedecms v5.7的ckeditor添加jwplayer插件
- C#算法基础之冒泡排序
- C# 4 dynamic 动态对象 动态类型转换