HTML+CSS 子元素的margin-top作用到了父元素上面

最新推荐文章于 2024-04-07 09:44:34 发布
最新推荐文章于 2024-04-07 09:44:34 发布
阅读量253 收藏
点赞数
分类专栏： HTml+CSS 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinianling/article/details/130743838
版权
文章介绍了当子元素的margin-top值作用到父元素上时的五种解决方案，包括：1)给父元素添加padding-top并使用box-sizing:border-box;2)设置父元素的overflow:hidden;3)添加1像素透明边框触发BFC;4)使用浮动（不推荐）；5)使用定位（不推荐，如absolute或fixed）。
摘要由CSDN通过智能技术生成

子元素的margin-top作用到了父元素上面—解决方案

1、父元素添加padding-top，此时父元素被撑大,使用怪异盒子box-sizing: border-box;
2、给父元素添加overflow:hidden;
3、给父元素添加1像素透明边框(触发BFC) border-top: 1px solid transparent;
4、给元素(子元素、父元素都可以)添加浮动(触发BFC)-----不推荐
5、给元素(子元素、父元素都可以)添加定位--------不推荐
position: absolute; 绝对定位 position: fixed; 固定定位

牛肉菠萝粒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css中子元素设置margin-top为什么影响了父元素
12-11
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
margin-top的时 父盒子跟着一块下来了
weixin_55209970的博客
08-07 673
margin-top的时 父盒子跟着一块下来了
解决父盒子因子盒子设置了margin塌陷问题
qq_62309807的博客
06-06 144
参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。外部元素也不会影响这个渲染区域内的元素。原理: table的display属性默认相当于table，所以形成小的bfc渲染区域。缺点: 万一有的子元素，即使溢出父元素，也希望显示呢？原理: 父元素变成BFC渲染区域，就必须包裹内层子元素的。优点: 空table元素没有大小，不占用父元素控件。缺点: 边框会增大父元素的实际大小，导致布局错乱。而实际上，子元素与父元素之间，依然是没有。会超出父元素上边的范围，变成父元素的。
css中给子元素添加margin-top影响到父元素
ｊａｖａ实现一个简单的计算器的加减乘除功能
11-22 1966
css给子元素添加margin-top会影响到父元素
父子关系中，子元素margin-top会作用在父元素上面，如何解决？
2301_76892837的博客
03-07 562
父子关系中，子元素margin-top会作用在父元素上面，如何解决？
[css] 解决问题---子元素设置margin-top，作用到父元素上
qq_14993591的博客
08-05 784
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
DIV元素加 margin 会把父元素的 margin 也撑高
weixin_44432032的博客
02-08 1301
这种现象叫做外边距合并或CSS样式margin叠加的问题。 原理：相邻两个元素都有margin，那么间距会取两者较大的作为间距距离； 同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。 解决方案一： 给父节点添加一个border ( border:1p
子元素的margin-top为什么会影响父元素？
苏苏就是小苏苏的博客
02-18 3125
1.两个元素，当你为子元素设置margin-top的时候，你会发现什么呢？ 2.解决方法 父元素设置 1- overflow: hidden 2- display: inline-block;或者float布局 3- border: 1px solid transparent; 4- position: absolute
父元素与子元素之间的margin-top问题(css hack)
01-19
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
div标签中的元素margin-top失效的解决方法
09-28
在某些情况下，开发者可能会选择利用CSS的calc()函数来计算外边距，这样可以在父元素上创建所需的额外空间，例如，如果希望子元素的margin-top为10像素，可以设置父元素的padding-top为calc(10px + value)，其中...
ChangMM#javascript-html-css-issue#CSS-第一个子元素的margin-top1
07-25
子元素的margin-top如下html其实我们给子元素设置一个margin-top，是想他相对父层节点顶部偏移20px，但是结果是如图：子层元素没有相父元素去
解决子元素设置margin-top使父元素也跟着向下移动的问题
卿本无忧的博客
07-10 820
解决子元素设置margin-top使父元素也跟着向下移动的问题
CSS - 你遇到过子元素设置margin-top，影响父元素的情况吗
最新发布
xingyu_qie的专栏
04-07 532
例如在一个div盒子元素内，需要设置一个标题，我们用一个p标签做为这个标题元素。根据UI设计要求，标题元素需要距离父div元素20px，理所当然想到的就是为标题元素设置margin-top为20px，希望可以撑开距离顶部的距离。但根据经验可知，这样做是存在问题的，父div元素会紧跟着p元素向下20px，并没有达到撑开20px的效果。先来看一下最初的代码和下图的效果。
子类元素设置margin-top，父类元素一起移动的原因以及解决思路
qq_60614034的博客
09-25 1717
初学者，不要骂
css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素
weixin_35891744的博客
08-04 967
[摘要]CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。问题描述：笔者想得到一个两个内套的...
CSS盒子模型——box-sizing属性、margin叠加和传递问题
BeWorriedJava的博客
03-10 969
盒子模型： 盒子模型包括content（内容区域）->padding（内边距）->border（边框）->margin（外边距）。 注： 1、背景颜色会填充到margin以内的区域。 2、文字会在content区域。 3、padding不能出现负值，margin可以出现负值。 标准盒子模型： 标准盒子模型的width和height设置的宽度和高度指的是content区域的大小。 box-sizing属性： box-sizing属性翻译就是盒尺存属性。即改变盒
flex布局，子级margin会撑爆父级div
qq_27806371的博客
09-08 719
flex布局 子级撑爆父级
margin-top作用到父元素上边的问题
qq_44161722的博客
10-09 262
问题：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用到父元素上边。例如：border:1px solid #00FFFF;在做项目时遇到了这个问题，百度了一下应该是值传递的问题。例如：overflow: hidden;2、在父级中添加padding。例如：padding:1px;1、在父级中添加border。
关于margin-top会撑开父元素的解决办法
chouwu1114的博客
12-02 2286
父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 解决方法： 1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 2、为父元...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值