[css] 解决问题---子元素设置margin-top，作用到父元素上

最新推荐文章于 2023-05-18 11:44:03 发布
最新推荐文章于 2023-05-18 11:44:03 发布
阅读量678 收藏 1
点赞数 3
分类专栏： # css # 面试 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/119413010
版权
css 同时被 2 个专栏收录
76 篇文章 1 订阅
订阅专栏
面试
36 篇文章 1 订阅
订阅专栏

在这里插入图片描述

<!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>Document</title>
    <style>
        *{margin:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述
会发现子元素设置的margin-top作用与父容器上了，这其实是css外边距合并产生的。

1. 给父元素添加一个透明的边框

margin是边框与边框之间的距离，加上边框就好了

<!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>Document</title>
    <style>
        *{margin:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
            border: 1px solid transparent;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述

2.给子元素添加padding-top

<!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>Document</title>
    <style>
        *{margin:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
                      
        }
        /*子元素*/
        p{
            width:200px;
            height:160px;
            background-color:orange;
            padding-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述

3.给父元素添加float

形成独立的BFC区域

<!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>Document</title>
    <style>
        *{margin:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
            float: left;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

4.给子元素添加float

形成独立的BFC区域

<!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>Document</title>
    <style>
        *{margin:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
            float: left;            

        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述

5.给父元素添加overflow: hidden;

形成独立的BFC区域

<!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>Document</title>
    <style>
        *{margin:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
            overflow: hidden;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

在这里插入图片描述

参考：
https://blog.csdn.net/weixin_43906597/article/details/85156524

533_
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素
weixin_35891744的博客
08-04 920
[摘要]CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。问题描述：笔者想得到一个两个内套的...
css入门笔记
05-15
:hover 匹配鼠标悬停在元素上时的状态 :active匹配鼠标激活时元素的状态 超链接、文本框、 密码框点击的时候，就是active。 :focus匹配元素获取焦点时的状态 文本框 和密码框 5.尺寸与边框 1.单位 1.尺寸单位 ...
css中子元素设置margin-top为什么影响了父元素
12-11
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <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:
HTML+CSS 子元素的margin-top作用到了父元素上面
最新发布
jinianling的博客
05-18 222
子元素的margin-top作用到了父元素上面解决方案
外边距重叠问题解决
money_monkey的博客
07-20 1614
外边距重叠问题
父子关系中，子元素margin-top会作用在父元素上面，如何解决？
2301_76892837的博客
03-07 498
父子关系中，子元素margin-top会作用在父元素上面，如何解决？
子元素的margin-top作用在父元素上
JJY的博客
10-03 518
这是因为css的外边距合并规则。两个相邻或嵌套的块级元素其外边距会合并为一个外边距，相邻的元素表现出两个外边距取大的那个，而嵌套的元素则表现为子元素设置margin-top，作用在父元素上。解决方案如下： 将父元素设置为BFC。 父元素设置padding-top，取代子元素设置margin-top，能达到同样的效果。 ...
css 父级设置了padding，但是子元素还是会超过padding解决方案
Technology_hands的博客
11-22 2189
我看了一下，是因为子元素，设置了width100%,以后还设置了padding,导致的问题，因为我们的盒子是标准盒子模型，width的宽度只是内容content的宽度，加上padding就会导致大于100%，所以有两个解决方案，一个是将盒子模型转换成怪异盒子模型，（box-sizing:border-box），一个是在移动端不要使用width:100%，的情况下就使用padding就不会超过100%。由上图所示，明明父级已经设置了一个padding,但是子元素还是跑出来了，这是为什么呢？
margin-top影响父级元素位置
weixin_45162984的博客
06-01 2144
margin-top影响父级元素位置 子元素的margin-top将父级元素也产生边距,导致这个问题的原因是,父级元素不具有一个完整的包裹性,使子元素不能找到父级元素的border或者padding; css规定 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。. 嵌套也在...
子元素上的margin作用到了父元素上
nicexibeidage的博客
05-14 841
margin外边距合并详解: 外边距合并现象在网页布局中非常的常见，必须对此有明确的把握，以此做到未雨绸缪，否则可能影响工作效率，甚至严重阻碍项目的进度。在网络上已经有大量的相关文章，下面结合实例代码对margin外边距合并做一下总结。 外边距合并概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。 水平方向不存在此现象。 外边距合并产生条件: （1）
子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; } &lt;div class="a"&gt;...
解决子元素设置margin-top，效果到父元素上的问题
04-16 186
原因:子元素和父元素的上边框重合 前端开发在重构页面的时候,子集需要按照设计图来设计尺寸 有的时候给子元素设置margin-top 子元素没有效果,反而父元素起到了 margintop效果,原因就是子元素和父元素上边框重合在一起 <!DOCTYPE html> <html lang="en"> <head> <meta c...
margin重叠
weixin_33895475的博客
07-03 98
margin折叠的产生有几个条件：这些margin都处于普通流中，并在同一个BFC中；这些margin没有被非空内容、padding、border 或 clear 分隔开；这些margin在垂直方向上是毗邻的，包括以下几种情况：1、一个box的top margin与第一个子box的top margin2、一个box的bottom margin与最后一个子box的bottom ...
子元素设置margin会影响父元素问题
ice-bear
01-21 1968
原因及解决
给子div设置的margin-top值在父div上生效了
Kratial的博客
05-12 474
1.问题产生： 在写元素垂直水平居中时，有一种方式是设置子元素margin: 具体值 auto 但此时发现给子元素设置的margin-top值作用在了父元素上 <style> .box1{ width: 200px; height: 200px; background-color: purple; margin: 20px; } .inner{ width: 100px; height: 100px
如何让子元素突破父元素padding的限制，变成和父元素一样的宽度？
masierty的博客
10-30 2871
我们在用UI库或者维护项目的时候，可能会遇到别人用div包裹了一层，并设置了padding，但是我们又想要让子元素突破padding的限制，让子元素和父元素一个宽度
css中给子元素添加margin-top影响到父元素
ｊａｖａ实现一个简单的计算器的加减乘除功能
11-22 1877
css给子元素添加margin-top会影响到父元素
子元素的margin-top为什么会影响父元素？
苏苏就是小苏苏的博客
02-18 3018
1.两个元素，当你为子元素设置margin-top的时候，你会发现什么呢？ 2.解决方法 父元素设置 1- overflow: hidden 2- display: inline-block;或者float布局 3- border: 1px solid transparent; 4- position: absolute
关于div嵌套margin-top影响父div的解决办法及各种情况测试
qq_31936457的博客
11-21 1144
div嵌套时 margin-top的解决办法及各种情况测试

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值