前端笔记-02(盒模型外边距合并)

最新推荐文章于 2023-03-17 08:44:38 发布

Super--rookie

最新推荐文章于 2023-03-17 08:44:38 发布

阅读量134

点赞数

分类专栏：前端文章标签：小白前端盒模型

本文链接：https://blog.csdn.net/qq_37964302/article/details/84000547

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

盒模型外边距合并问题

若为兄弟元素，则按比较大的边距合并
若为父子元素的解决方案
1：父元素加：overflow：hidden；
2: 父元素加边框border或padding属性;
3: 父元素或子元素浮动;
4: 父元素或子元素定位；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #d1 {
            height: 400px;
            width: 400px;
            margin-bottom: 50px;
            background: teal;
        }

        #d2 {
            height: 400px;
            width: 400px;
            margin-top: 20px;
            background: saddlebrown;
        }

        /* 若为兄弟结点，则按比较大的边距合并 */
        #d3 {
            height: 600px;
            width: 600px;
            background: turquoise;
            margin-top: 50px;
            /* overflow: hidden; */
            /* border:peru 1px solid; */
            /* float: right;   */
            position: absolute;
        }

        #d4 {
            height: 400px;
            width: 400px;
            background: peru;
            margin-top: 50px;
            /* float: right;   */
            /* position:absolute; */
            /* margin-left:50px; */

        }

        /* 父子外边距合并的解决方案 
            父元素加：overflow：hidden；
            父元素加边框或padding属性
            父元素或子元素浮动
            父元素或子元素定位
         */
    </style>
</head>

<body>
    <div id="d1">11111</div>
    <div id="d2">22222</div>
    <div id="d3">
        <div id="d4"></div>
    </div>
</body>

</html>

Super--rookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记-02(盒模型外边距合并)

盒模型外边距合并问题若为兄弟元素，则按比较大的边距合并若为父子的解决方案1：父元素加：overflow：hidden；2: 父元素加边框border或padding属性;3: 父元素或子元素浮动;4: 父元素或子元素定位；&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&a
复制链接

扫一扫

专栏目录