margin重叠现象

亦凉 2022-06-06 08:26 228阅读 0赞

**margin重叠现象探讨研究**

在网页页面布局中，经常会出现以下两种现象：

1、相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值。如例1

2、关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。如例2

例1：

HTML代码：

<div class="bro1">div1</div>
    <div class="bro2">div2</div>

1. 2.

CSS代码：

<style type="text/css">
        .bro1{
            height:100px;
            background: pink;
            margin-bottom: 50px;
        }
        .bro2{
            height:100px;
            background: silver;
            margin-top:80px;
        }
    </style>

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

效果图如下：

![兄弟margin重叠现象探讨研究][margin]

需要说明的是:若相邻的两个普通兄弟元素,它们的 margin 值是一样的,则两个的 margin 值就各取两个元素 margin 值的一半.

例2：

HTML代码：

<div class="far">
        <div class="son"></div>
    </div>

1. 2. 3.

CSS代码：

<style type="text/css">
        .far{
            height:200px;
            background: green;
            margin-top:80px;
        }
        .son{
            height:100px;
            background: blue;
            margin-top: 50px;
        }
    </style>

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

效果图如下：

![父子margin重叠现象探讨研究][margin 1]

[margin]: http://www.ft-love.com/Public/Upload/article/day_131203/201312031934461950.png
[margin 1]: http://www.ft-love.com/Public/Upload/article/day_131203/201312031942056212.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS margin 重叠(margin collapse)

首先有两个地方是我自己以前也没有注意的非替换元素的内联元素(,等),设置上下margin没有用.但是设置左右margin是有效果的.而替换元素(等),设置上下左右四个ma...

青旅半醒/ 2024年05月24日 04:32/ 0 赞/ 66 阅读

相关 css的盒子外边距margin会重叠

在css里有一个奇怪的特性，就是两个或多个盒子(可能相邻也可能是父子)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。相邻盒子边界的计算方式：

深碍√TFBOYSˉ_/ 2022年09月11日 12:28/ 0 赞/ 216 阅读

相关 margin

1、相邻块元素垂直外边距的合并 ![这里写图片描述][SouthEast] 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的

本是古典何须时尚/ 2022年06月14日 05:45/ 0 赞/ 255 阅读

相关 margin上下重叠问题

边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个

客官°小女子只卖身不卖艺/ 2022年06月09日 12:55/ 0 赞/ 239 阅读

相关 margin重叠现象

margin重叠现象探讨研究在网页页面布局中，经常会出现以下两种现象： 1、相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值。如例1 2、关

亦凉/ 2022年06月06日 08:26/ 0 赞/ 229 阅读

相关关于盒子模型中margin叠加现象的归类与思考

问题由来在对嵌套元素的子元素进行垂直方向上的居中操作时，采用margin-top会出现父元素和子元素一同下移的现象无法达到想要的效果。 <!--html代码块

客官°小女子只卖身不卖艺/ 2022年05月18日 07:57/ 0 赞/ 149 阅读

相关干货极致分享——CSS 外边距(margin)重叠及防止方法，网友感动哭

![1240][] 边距重叠解决方案(BFC) 首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

「爱情、让人受尽委屈。」/ 2022年02月24日 03:08/ 0 赞/ 289 阅读

相关边距margin重叠解决方案(BFC)

边距重叠解决方案(BFC) 首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文” 两个或多个块级盒子的垂

雨点打透心脏的1/2处/ 2021年09月29日 23:06/ 0 赞/ 636 阅读

相关 css margin重叠合并

产生原因: 当垂直方向的同级或者嵌套的盒元素(块级),并且它们之间没有非空内容、Padding或Border分隔。则它们的margin会合并

浅浅的花香味﹌/ 2021年07月24日 11:03/ 0 赞/ 450 阅读

相关 margin重叠是什么

margin重叠：是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

小灰灰/ 2020年04月26日 07:29/ 0 赞/ 946 阅读