子元素增加margin-top会增加给父元素的问题
假设我们有如下代码
<div id="father" style="height:400px;width:400px;background:#e4393c;">
<div id="child" style="background:green;height:100px;width:100px;margin-top:40px;"></div>
</div>
会发现效果如下所示
子元素的margin-top并没有使子元素与父元素分开,反倒效果等同于给父元素加了一个margin-top;
解决的方法也有,具体为:
1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px;)
2.为父元素添加overflow:hidden;
3.为父元素或者子元素生命元素浮动(float:left;可用但是不推荐)
4.为父元素添加border(border:1px solid transparent)
5.为父元素或者子元素声明绝对定位
6.给父元素增加内容生成#father:before{content:' ';display:table};
转载于:https://www.cnblogs.com/gong12339/p/5132343.html
子元素增加margin-top会增加给父元素的问题相关推荐
- 【疑点】当子元素全部浮动时,怎么解决父元素塌陷的问题?
[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? 参考文章: (1)[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? (2)https://www.cnblogs.com/roashley ...
- 当子元素设置position absolute的时,父元素必须设置position属性
当子元素设置position absolute的时,父元素必须设置position属性.
- 深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素
深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素 先写一个模板,晚点再吐槽 吐槽 实现原理 与 更多支持的属性 不想使父级的 块 属性消失怎么办 这种属性规则有什么作 ...
- 子元素设置position:fixed,z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条.borde-radius存在.position不为static时,和z-index不为auto时,子元素的position就算是fix ...
- 关于子元素连续数字和英文内容溢出父元素的问题
今天在写博客的时候,想写一些代码作为例子进行验证,但是遇到了一个问题.下面是问题代码: <!DOCTYPE html> <html><head><meta c ...
- jQuery获取元素上一个、下一个、父元素、子元素
jQuery获取: jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span") ...
- 行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
- css笔记(选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影)
##css(Cascading Style Sheet) 1.样式引入 行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
最新文章
- java基本数据类型_Java面试题Java中有几种基本数据类型?它们分别占多大字节?...
- java 匿名类 实现接口_细谈 Java 匿名内部类 【分别 使用 接口 和 抽象类实现】...
- sql求平均日活_杨学峰博客 | Flask Sqlarchemy实现按日、周、月统计并图表展示
- Openstack的nova-network的vlan模式扩展
- element ui 组件踩坑记录--后台管理系统-最全
- java泛型编程_Java编程泛型限定代码分享
- [BZOJ1563][NOI2009]诗人小G[决策单调性优化]
- linux----------今天又遇到一个奇葩的问题,就是linux文件的权限已经是777了但是还是没有写入权限,按照下面的命令就解决了
- Bailian2701 Bailian3864 与7无关的数【进制】(POJ NOI0105-39)
- 华为matepad使用鸿蒙系统,首发鸿蒙系统!华为MatePad采用骁龙+麒麟双芯片版本,哪款更香?...
- 动态规划解决完全背包问题(cpp)
- MD5 文件校验之 java 实现
- 大理古城“悟空、八戒”与人互殴 警方:四人被行拘
- 12款多媒体能力SDK与开发平台盘点
- matlab ax=b x=,matlab 求解 Ax=B 时所用算法
- c++2048小游戏编写
- 充电桩APP开发方案
- Python面向对象编程(类编程)中self的含义详解(简单明了直击本质的解释)
- 华擎主板简直在开玩笑
- QQ音乐7.0换新上线: 轻简风带来全新听歌体验
热门文章
- 【CodeForces - 371D】Vessels(思维,元素合并,并查集)
- Linux操作系统CentOS7安装
- 13.Data Leakage
- html中如何让三个方块并排,html – 并排设置两个div,然后设置第三个div
- oracle中那个日期怎么相减_oracle数据库中日期加减函数
- UserThreadLocal 用户线程Token拦截验证
- 较简单的字节输入流输出流拷贝文件
- 32位mips运算器logisim_大神教你制作一个简单的16位CPU
- 李牛(Linux)vi
- Redis:17---常用功能之(事务)