关于第一个子元素margin-top值传递给父元素的问题

最新推荐文章于 2022-02-28 22:49:25 发布
最新推荐文章于 2022-02-28 22:49:25 发布
阅读量314 收藏
点赞数 1
分类专栏： # html+css 文章标签： margin-top css html 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42590083/article/details/111151745
版权

关于第一个子元素margin-top值传递给父元素的问题

解决办法：
	1.给父元素设置一个边框，
	2.父元素使用padding;
	3.父元素使用overflow：hidden
	4.父元素使用浮动
	5.对于子元素添加float
	6.还有一种就是在子元素前面在添加一个块元素，高度设置很小也是可以解决的；

注： 其实解决这个办法虽然多，但是好用的就是给父元素overflow，border，和第六点给子元素钱添加一个块元素，是影响最小的 ；
等待的L先生
关注
专栏目录
四、margin存在问题、内联标签使用边距、最大最小宽高、背景相关样式、进阶选择器、css三大特性
qq_52426181的博客
11-27 467
一、margin存在问题 1.重叠问题 问题：两个兄弟元素同时设置margin-top和margin-bottom，会出现重叠，取最大值 解决办法： 避免两个同时设置，只给其中一个方向设置 给其中一个盒子套一个大盒子括起来，给大盒子设置overflow:hidden;形成私有区域 2.塌陷问题 问题：父元素里的第一个子元素设置margin-top,会传递给父元素 解决办法： 避免使用margin-top 给父元素设置padding-top:1px； 给父元素设置border-top:1p
CSS基础知识
ailsa_csdn的博客
03-23 636
css选择器、盒模型、浮动、定位等基础知识
为什么清除浮动？
hahahaha__init__的博客
09-09 360
因为最大的父元素不方便给高度，子元素不确定多少 所以应该让子元素撑开父元素 但是会使父元素变为0 会影响下一个元素 这时候就需要清除浮动了 因为浮动不占有位置，需要清除浮动，来占位置 ...
子元素margin-top属性传递给父元素的问题
湛庐无方
10-23 3574
问题描述： 一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走，而子元素和父元素的边距则没有发生变化。 html结构： css样式： .box1{height:400px;background:#fad;} .box1_1{height:100px;margin-top:50px;background:#ade;} 解
第一个子元素设置margin-top问题
拿回忆下酒
04-13 900
<div class="body"> 最外层 <div class="parent"> <div class="child">子元素</div> 父元素 </div> </div> .body{ background: yellow; .parent{ width: 200px; height: 200px; background: re.
FF下子div的margin-top被传递给父div的解决办法
weixin_33863087的博客
12-09 97
当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。也就是说因为子层是父层的第一个非空子元素，所以使用margin-top会发生这个错误。解决的办法有两个：1、使用浮动来解决，即将子层代码改为：<div style="margin-top:200px;float:left";>子层</div>2、使用pad...
子元素的margin-top属性传递给父元素的问题
到得还来别无事，庐山烟雨浙江潮。
12-19 622
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
解决margin-top的值传递问题
weixin_45630345的博客
06-01 497
值传递问题：子级的margin-top值给了父级，导致父级的margin-top值显示的效果成了子级的值，同时子级上边紧贴父级上边。 解决方式1：在父级中添加border 例如：border:1px solid #00FFFF; 解决方式2：在父级中添加padding 例如：padding:1px; 解决方式3：推荐使用。 例如：overflow: hidden; 下面举一个例子，A为父级，B为子级，部分CSS代码。 #A{ width:300px; height:30
前端面试-CSS
wanglu458512的博客
09-19 3038
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
React全家桶详细讲解-图文并茂
m0_67266787的博客
02-28 3198
文章目录 前言 一、React-表单处理 受控组件 使用步骤 多表单元素优化 非受控组件 二、React-组件综合案例 需求分析 搭建任务的模板 渲染列表 添加任务 删除任务 三、React-组件进阶 组件通讯介绍 组件的props 四、react-组件通讯的三种方式 react-父组件传递数据给子组件 react-子组件传递数据给父组件 react-兄弟组件传递 五、react-生命周期 创建时（挂载阶段） 更新时 卸载时 完整生命周期钩子函数 六、React-原
Vue中将better-scroll封装成一个组件，并实现完美吸顶效果
鸭绒的博客
11-25 1473
先来看看实现的效果： 上面的效果就是利用了better-scroll实现的滑动，可见better-scroll实现的弹性效果还是很不错的，但是better-scroll还是有很多bug的，因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了，因此吸顶也成了一件难题，还好有人想到了好办法解决了该问题，后面再说。 直接看封装好的better-scroll: <template> <div
第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题
weixin_30572613的博客
12-19 246
当父元素没有边框border时，子元素加margin-top（这里以第一个子元素的 margin-top为例），会出现 margin-top加在父元素上的bug。 解决方法有四种：1.给父元素加border。 2.给父元素加padding。 3.给父元素加overflow:hidden。 ...
margin-top父级传递问题
weixin_48864616的博客
10-13 209
margin-top 父级传递问题 什么叫父级传递 父级传递是a元素嵌套b元素 给b元素加margin-top 值时 作用在a元素上面 未设置margin-top值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin-top的问题</title> <style type="text/css"> *{
不要告诉我你懂margin
dgk62408的博客
06-27 1190
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于...
css-margin-top传递的现象及解决方案
东东爱编码博客
09-11 626
文章目录一、margin-top传递的现象及解决方案 一、margin-top传递的现象及解决方案 现象： 父子盒子，希望子盒子顶部距离父盒子有一定的高度。然后我们设置了子盒子的margin-top:20px，但是当我们这么设置的时候，却发现父盒子和子盒子都向下偏移了20px。这就是标题中提到的margin-top的传递现象。 基础代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
CSS设置子元素设置margin-top作用于父元素
sinat_35030910的博客
10-13 902
关于子元素的margin-top作用于父元素的原因解释
margin-top传递的问题
可爱滴菜鸟
11-07 489
margin重叠 1、block元素 2、垂直方向 解决办法: 给父元素添加border 使用padding代替margin 设置子元素为行内块元素 display: inline-block; 开启元素的BFC(开启方法百度)
父元素高度塌陷和BFC
weixin_43269800的博客
01-02 585
父元素高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的， 也就是子元素多高，父元素多高。子元素设置浮动或者设置绝对定位后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷。则父元素下面的元素会向上移动，导致布局混乱。 BFC 根据w3c的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。该属性可以设置打开或...
margin-top传递问题
weixin_43366084的博客
03-09 432
在包含结构里，给子元素添加margin-top，正常情况是子元素下来，但是在浏览器解析时，会把这个上外边距传递给父元素，父元素也会下来。 解决方法： 给父元素添加overflow: hidden;溢出隐藏 给父元素添加边框border-top: 2px solid transparent; 给父元素或子元素添加浮动float: left; ...
css中给子元素添加margin-top影响到父元素
最新发布
09-01
然而，当给子元素添加margin-top时，子元素的margin-top值为负数时，就会导致父元素相对应上移。子元素会向上移动，但是父元素的高度不会相应增加以适应子元素的移动。这种情况下，父元素的内容会被覆盖，可能会导致...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值