项目中遇到的问题——子元素 margin-top 影响父元素

最新推荐文章于 2023-03-28 15:02:44 发布
最新推荐文章于 2023-03-28 15:02:44 发布
阅读量204 收藏
点赞数
分类专栏： 学习笔记 每日一记 css 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41807530/article/details/122318438
版权
学习笔记 同时被 3 个专栏收录
49 篇文章 0 订阅
订阅专栏
css
6 篇文章 0 订阅
订阅专栏
每日一记
1 篇文章 0 订阅
订阅专栏

查阅资料后发现是因为盒模型的规范造成的。

有以下解决办法

1、 给子元素设置 float： left

2、 给父元素设置 padding 值 。但是值不能为 0

3、 给父元素添加border 值。同样值不能为 0 

小蘑菇0629
关注
专栏目录
css 选父元素,CSS中模拟父元素选择器
weixin_30750685的博客
08-03 7078
很多情况下，我们需要找到父元素，但可惜的是css中并没有这样的一个选择器。至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。简单来说这个实现并不是真正的父元素选择器，只是利用其它思路来实现相同效果罢了。HTML：ppppppppCSS：div,p{margin:0;padding:0;}#box{width:300px;height:300px;position:relative;}#...
web前端开发中遇到的问题整理记录——2019-05
samll_cat的博客
06-21 6083
目录 小程序中，子页面传值给父页面的方法 小程序中，input高度设置 angular 当数据改变时，页面数据不改变的解决办法 小程序wx.base64ToArrayBuffer调用时，提示thirdScriptError “atob” failed;undefined Error: “atob” faile 微信小程序checkbox样式修改 循环获取object的属性名和属性值 JS中bre...
子元素margin影响父元素如何解决
weixin_45357661的博客
03-28 221
这是个常见问题，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。问题描述：有些情况下，我们设定父元素下的子元素margin值时，父元素会被影响。解决方案：对父元素增加CSS代码。
如何消除margin-top对父元素的影响
Efficiency9的博客
05-23 1567
有时我们会在css中遇到这种情况： 当我们给子元素设置了margin-top值之后，不仅子元素没有发生变化，父元素却发生了变化（外边距合并） 解决方案一： 给子元素加上float：left 解决方案二： 为父元素添加border属性(值不能为0) 解决方案三： 为父元素添加padding（值不能为0）
子盒子设置margin值时影响父盒子的解决方法
document_write的博客
08-17 1075
方法一：为父元素设置border 方法二：为父元素添加overflow：hidden；样式 方法三：为父元素或者子元素声明浮动 方法四：为父元素或者子元素声明绝对定位 ...
子元素设置margin会影响父元素问题
ice-bear
01-21 2170
原因及解决
HTML中子元素margin-top属性影响父元素的bug解决方案
weixin_34411563的博客
04-06 326
如图所示。在HTML中 子元素添加margin-top 属性时会影响父元素的margin值，解决方案有三种。 解决方案一： 父元素或者子元素 添加 float浮动属性 这种方法容易引起另外的bug 例如父元素添加float属性时的 文档流层级会增加 ， 会覆盖到未添加float 属性的块级元素上方。 关于文档流模型 我们下次再详细说明。 如图所示会出现这样的bug. 解决方案二： 给...
子DIV块中设置margin-top时影响父DIV块位置问题
hahhahahaa的博客
06-13 1万+
相信很多前端同学在做页面开发的时候都遇到过这样的问题。给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。如下面的代码.a { width:100px; height:100px; } .b { width:50px; height:50px; margin-top:10px; } <div class="a">...
H5面试——display：inline-block问题总结
肉嘟嘟的博客
08-02 1185
1、将块元素转化为内联元素时，内联块之间会有一小段空白。 解决方法： （1）给父容器加font-size:0，子元素另行设置 （2）父元素Letter-spacing：-3px，子元素letter-spacing:0 （3）父元素Word-spacing:-6px，子元素letter-spacing:0 （4）设置左边的marg
CSS基本布局——定位
m0_57954016的博客
06-21 4101
kubernetes(k8s)部署elasticsearch(es) 须知: Kubernetes StatefulSet允许我们为Pod分配⼀个稳定的标识和持久化存储。 Elasticsearch需要稳定的存储来保证Pod在重新调度或者重启后的数据依然不变，所以我这里使⽤StatefulSet来管理Pod。 部署三节点的elasticsearch，并使用nfs做数据永久持久化存储（StorageClass） 环境： kubernetes版本：v1.19.3 docker版本：20...
CSS中越界问题的经典解决方案【推荐】
12-13
(1)如何解决父元素的第一个子元素的margin-top越界问题 1)为父元素加border-top: 1px;——有副作用 2)为父元素指定padding-top: 1px;——有副作用 3)为父元素指定overflow:hidden;——有副作用 4)为父元素添加前置...
子元素margin影响父元素
小柒的博客
04-28 1174
bug分析 浏览器内核在渲染margin时会在捕获到子元素并对子元素的模型渲染完毕之后，开始向父级寻找父级的边界 父元素的边界由父元素的边界属性决定，如果父级没有边界，父级就会受到子元素的margin影响，导致父级产生同样的margin 什么是边距属性 盒子模型的border padding margin overflow 为盒子模型的边距属性 解决方法一 为父级设置overf...
子元素设置margin-top，父元素也受影响
热门推荐
沫沫酱
12-09 2万+
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         m
解决 margin-top 影响父元素的办法
无止境学的博客
12-02 575
如下四种方法 1、父元素设置 overflow:hidden; 2、父元素设置 padding-top:1px; 3、父元素设置 border-top:1px solid transparent; 4、父元素或子元素设置浮动 float:left; 或者绝对定位 position:absolute; ...
css中子元素设置margin-top为什么影响了父元素
weixin_42116120的博客
10-06 673
<style type="text/css"> *{ margin: 0px; padding: 0px;} .show { margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2 { margin-top: 50px; cursor: pointer; } </style> <body> <di
margin塌陷、margin重叠解决方案，你学会了吗？
qq_35727582的博客
01-11 3078
margin 合并的问题在实际开发中经常会遇到，有时候需要让 margin 都能正常显示，一起了解一下有哪些解决办法
项目中遇到的问题---vue+element对话框关闭后重新打开数据不清空
weixin_41807530的博客
11-23 1万+
解决方法： 1、 &lt;el-dialog title="提示" :visible.sync="channelBox" size="tiny" :before-close="closeImport "&gt; &lt;span&gt;这是一段信息&lt;/span&gt; &lt;span slot="footer" cl
数组和对象的区别总结
weixin_41807530的博客
06-27 1万+
1、创建方法：2、对象没有长度3、调用方法不同4、因为没有长度。所以对象没有for 循环5、对象键值唯一，数组可以重复6、都可以用for in 循环
css中给子元素添加margin-top影响到父元素
最新发布
09-01
在CSS中，给子元素添加margin-top会直接影响到父元素。 当给子元素添加margin-top时，子元素会相对于它的父元素进行定位。如果子元素的margin-top值为正数，那么子元素就会向上移动，同时父元素的高度也会增加，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蘑菇0629

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值