CSSmargin击穿问题(子元素margin-top会影响父元素)
最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑。唉,有些东西不用就忘。
一、问题描述
<div class="container">
<div class="children">子元素</div>
</div>
.container {
background-color: rgb(226, 43, 89);
}
.children {
background-color: rgb(228, 131, 12);
margin-top: 20px;
}
最终效果:会发现在元素上面会有20px的空白,然而我们并没有对父元素设置margin,可见是子元素的 margin-top:20px 影响到了父元素。
二、原因:MDN的文档:如果没有边框border
,内边距padding
,行内内容,也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top
与其内一个或多个后代块级元素的上边界margin-top
;或没有边框,内边距,行内内容,高度height
,最小高度min-height
或 最大高度max-height
来分开一个块级元素的下边界margin-bottom
与其内的一个或多个后代后代块元素的下边界margin-bottom
,则就会出现父块元素和其内后代块元素外边界重叠,重叠部分最终会溢出到父级块元素外面。
三、简单的解决方案:
1、父元素加border。emmm,这样会多加border的宽度。
2、父元素overflow:auto。(比较喜欢这种。)
3、设置父元素的display为flex或inline-block。
4、使用绝对定位。
5、愿意的话可以在父元素子元素之间再加一个div咯。
CSSmargin击穿问题(子元素margin-top会影响父元素)的更多相关文章
- 子元素设定margin值会影响父元素
有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...
- 子元素margin-top为何会影响父元素?
子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...
- 子元素的margin-top会影响父元素
---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...
- 子元素设置margin-top后,父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...
- 当fixed元素相互嵌套时,父元素会影响子元素的层叠关系,最好不要嵌套使用fixed
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...
- Atitit.判断元素是否显示隐藏在父元素 overflow
Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop 指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素 $(next) ...
- margin-top影响父元素定位
写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...
- 给HTML页面指定元素添加属性,添加父元素
给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img 此处用到querySelectorA ...
随机推荐
- python 利用cvxopt线性规划
from cvxopt import matrix, solvers ################################################################# ...
- @Autowired 和@Resource区别
二者都可以用在bean的注入时,但是@Autowired是spring提供的注解,而@Resource是javax包中的. 默认情况下,@Autowired注入规则是byType,通过类型注入:当然, ...
- java中读取word文档里的内容
package com.cn.peitest.excel.word; import java.io.FileInputStream; import java.io.FileOutputStream; ...
- mysql中order by优化的那些事儿
为了测试方便和直观,我们需要先创建一张测试表并插入一些数据: CREATE TABLE `shop` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '记 ...
- RocketMQ(十):数据存储模型设计与实现
消息中间件,说是一个通信组件也没有错,因为它的本职工作是做消息的传递.然而要做到高效的消息传递,很重要的一点是数据结构,数据结构设计的好坏,一定程度上决定了该消息组件的性能以及能力上限. 1. 消息中 ...
- Sqoop(一)安装及基本使用
Sqoop: 1.sqoop从数据库中导入数据到HDFS 2.SQOOP从数据库导入数据到hive 3.sqoop从hive中将数据导出到数据库 sqoop底层还是执行的m ...
- 【剑指 Offer】08.二叉树的下一个节点
题目描述 给定一颗二叉树和其中的一个节点,找出中序遍历序列的下一个节点.树中的节点除了有两个分别指向左右节点的指针,还有一个指向父节点的指针. Java public class Solution08 ...
- 70.LeetCode爬楼梯
爬楼梯 点击标题可跳转到官网进行查看 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: ...
- wpf 中 Ellipse 对象对动画性能的影响
vs2019 .NetFramework 4.8 win10-64 1909 接手一个wpf项目,某窗口中包含大量的 Shape 对象(线,矩形,圆形等). 这些内容要匀速的向左平移,类似于游戏&qu ...
- 使用 C# 9 的records作为强类型ID - 路由和查询参数
上一篇文章,我介绍了使用 C# 9 的record类型作为强类型id,非常简洁 public record ProductId(int Value); 但是在强类型id真正可用之前,还有一些问题需要解 ...