margin-top传递的问题

最新推荐文章于 2022-10-06 12:53:08 发布
最新推荐文章于 2022-10-06 12:53:08 发布
阅读量488 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48802738/article/details/109546498
版权

会产生margin重叠的原因
1、block元素(且父元素与元素平齐)
2、垂直方向(只作用在垂直方向)
解决办法:

  1. 给父元素添加border
  2. 使用padding代替margin
  3. 设置子元素为行内块元素 display: inline-block;
  4. 开启元素的BFC(开启方法百度)
可爱滴菜鸟
关注
专栏目录
关于margin-top兼容问题
weixin_53278262的博客
12-21 574
关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解 html代码: <div class="box"> <div class="child"></div> </div> css代码: * { margin: 0; padding: 0; } .box {
overflow：hidden；本意是隐藏超出文本框的内容，为什么能实现清除浮动和解决margin坍陷？
m0_37724356的博客
10-30 792
首先，清除浮动本质上是触发了BFC,只要是能触发BFC,就能清除浮动。那这里就得解释什么是BFC。 一、BFC定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。（其中Block-level box是display 属性为 block, list-item, table 的元素） 简单来说BFC的定义如下： 浮动元
margin-top传递问题
前端小李在努力的博客
10-06 452
margin-top的传递问题
margin-top的传递问题
m0_56431780的博客
05-15 165
<style> .a{ width:300px; height:300px; background-color:#000; /*解决方案：在父元素加overflow:hidden*/ overflow:hidden; } .a1{ width:100px; ...
子元素的margin-top属性传递给父元素的问题
LI-Jiacong的博客
11-23 731
说实话，这个问题时常困扰我，不过每次解决之后，都没有深究。 额，深深的鄙视一下自己。 &lt;style&gt; div.parent{background: #FF92D5;height:200px;margin-top: 0;} .child{height: 40px;margin-top: 40px;backg...
margin-top父级传递问题
weixin_48864616的博客
10-13 208
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-top在火狐和IE的区别
10-11
然而，Firefox和IE对`margin-top`的处理方式有所不同，尤其是在某些特定情况下，Firefox可能会将子元素的`margin-top`传递给父元素，使得父元素的顶部外边距受到影响，这被称为“margin绑架”现象。而IE通常不会表现...
当子元素的margin-top传递到父元素上时,以下哪个属性可以解决
04-06
'\xe5\xbd\x93\xe5\xad\x90\xe5\x85\x83\xe7\xb4\xa0\xe7\x9a\x84margin-top\xe4\xbc\xa0\xe9\x80\x92\xe5\x88\xb0\xe7\x88\xb6\xe5\x85\x83\xe7\xb4\xa0\xe4\xb8\x8a'这句话的意思是，子元素的margin-top传递到父...
<view> <!-- 书籍列表 --> <div style="width: 80%;margin-left: 10%;margin-top: 2%;"> <booklist v-loading="loading" :books="bookList"/> </div> <!-- 回到顶部 --> <el-backtop /> </view>
最新发布
06-13
`v-loading` 指令将加载状态与 `loading` 变量进行绑定，`:books` 属性将书籍列表数据传递给 `booklist` 组件进行显示。 - `booklist` 组件用于显示书籍列表数据。 - 一个 `el-backtop` 组件，用于在页面滚动时显示...
margin传递问题
CurtainOfNight的博客
04-21 1052
margin传递问题   在HTML的嵌套结构中，有时候想用margin来调整位置时发现子类调整会影响到父类！？但是这种传递问题只出现在margin-top，左右下不会有影响！ 解决方法： BFC规范； 給父容器添加边框（这个方法不是很好，因为有时候父容器不要添加边框）； 把margin换成padding，在父容器添加padding也可以达到同样的效果 注意： 当父...
子集元素的margin-top会传递给祖先元素或者父级元素
weixin_44432032的博客
08-29 233
子集元素的margin-top会传递给祖先元素或者父级元素，解决方法：给父级元素添加一个padding-top: 1px;就可以完美的解决问题
解决margin-top的值传递问题
weixin_45630345的博客
06-01 496
值传递问题：子级的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
FF下子div的margin-top被传递给父div的解决办法
weixin_33863087的博客
12-09 96
当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。也就是说因为子层是父层的第一个非空子元素，所以使用margin-top会发生这个错误。解决的办法有两个：1、使用浮动来解决，即将子层代码改为：<div style="margin-top:200px;float:left";>子层</div>2、使用pad...
1.第一个子级的margin top 会传递给父级
咖喱鸡块的博客
07-20 971
当给子集使用margin top属性的时候 若不想影响父级的解决办法 1.给父级添加border; 2.父级使用overflow:hidden; 3.不要使用margin-top 用父级padding-top 温馨提示:注意盒子的空间
css-margin-top传递的现象及解决方案
东东爱编码博客
09-11 623
文章目录一、margin-top传递的现象及解决方案 一、margin-top传递的现象及解决方案 现象： 父子盒子，希望子盒子顶部距离父盒子有一定的高度。然后我们设置了子盒子的margin-top:20px，但是当我们这么设置的时候，却发现父盒子和子盒子都向下偏移了20px。这就是标题中提到的margin-top的传递现象。 基础代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
html中关于margin-top传递性问题的讨论
weixin_30347009的博客
10-23 397
在HTML中 一个父元素包裹一个子元素的div，在给子元素的div设置margin-top时，会传递给父元素 解决办法:1、修改父元素的高度,给父元素加上padding-top:40px;2、为父元素添加overflow:hidden3、为父元素添加border4、为父元素或者子元素声明绝对定位。5、为父元素或者子元素声明浮动 转载于:https://ww...
html中关于margin-top传递性问题的解决方法
qq_42008211的博客
01-03 770
margin-top现象： a元素内嵌套b元素，给b元素添加margin-top后，会传递给a元素 如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin-top的问题</title> <style type="text/css"> * { margin: 0px;
margin的传递和折叠
coderlhj666的博客
05-26 646
margin的传递和折叠 一、margin的上下传递(一般发生在父子元素之间) margin-top传递 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素 为什么会产生传递呢？ 原因很简单：w3c的人设计的时候可能考虑到既然父子是近挨着的，子元素没必要设置外边距，给父元素设置更适合 解决方案： 1、给父元素设置overflow：auto，触发BFC 2、给父元素设置padding-top、padding-bottom 3、给父元素设
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值