margin的两个有趣现象：margin合并和margin塌陷

james 发布于2019-04-23 13:18 / 1536人阅读

摘要：有两个，包含，给一个，让和之间产生的距离结果会发现和没产生距离，反而是带着离页面顶端解决办法给父级盒子设置给父级盒子设置给父级盒子设置

margin合并

当两个元素在垂直方向并列，分别设置margin值时会发生一个margin合并的现象

举个例子，有两个div，垂直并列，box1设置margin-bottom:20px，box2设置margin-top:50px，

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <style type="text/css">
    *{
        margin：0;
        padding: 0;
    }
    div{
        width: 50px;
        height: 50px;
    }
    #box1{
        margin-bottom: 20px;
        background: red;
    }
    #box2{
        margin-top: 50px;
        background: blue;
    }
    style>
head>
<body>
    <div id="box1">div>
    <div id="box2">div>
body>
html>

按照一般的思维，这两个div之间的距离就应该是70px，事实并非如此，两个div之间的距离只有50px，因为两个div的margin重叠，它会取最大值

一般来说margin合并不常见，因为只需设置一个div的margin来达到二者之间的距离就可以了

margin塌陷

margin塌陷很常见，存在于嵌套关系的盒子之间。

有两个div，box1包含box2，给box2一个margin-top:20px，让box2和box1之间产生20px的距离

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <style type="text/css">
    *{
        margin：0;
        padding: 0;
    }
    #box1{
        width: 100px;
        height: 100px;
        background: red;
    }
    #box2{
        width: 50px;
        height: 50px;
        margin-top: 20px;
        background: blue;
    }
    style>
head>
<body>
    <div id="box1">
        <div id="box2">div>
    div>
body>
html>

结果会发现box1和box2没产生距离，反而是box1带着box2离页面顶端20px

解决办法：

给父级盒子设置overflow:hidden
给父级盒子设置border
给父级盒子设置padding

GPU云服务器云服务器 margin: margins margin margin缩写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1704.html

关于CSS外边距塌陷的问题

摘要：关于外边距塌陷合并的问题主要资料来源定义块的顶部外边距和底部外边距有时被组合折叠为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷合并发生外边距塌陷的三种情况相邻的兄弟姐妹元素此时两个中间的距离并不是，而是。关于CSS外边距塌陷（合并）的问题主要资料来源：https://developer.mozilla.org... 定义块的顶部外边距和底部外边距有时被组合（...

SunZhaopeng 2019-08-01 17:35 评论0 收藏0
关于CSS外边距塌陷的问题

摘要：关于外边距塌陷合并的问题主要资料来源定义块的顶部外边距和底部外边距有时被组合折叠为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷合并发生外边距塌陷的三种情况相邻的兄弟姐妹元素此时两个中间的距离并不是，而是。关于CSS外边距塌陷（合并）的问题主要资料来源：https://developer.mozilla.org... 定义块的顶部外边距和底部外边距有时被组合（...

cyrils 2019-08-29 13:24 评论0 收藏0
web前端（11）—— 页面布局1

摘要：维护起来更加方便不足雪碧的最大问题是内存使用拼图维护比较麻烦使的编写变得困难雪碧调用的图片不能被打印我们可以使用综合属性制作通天，什么是通天呢，就是一般我们电脑的屏幕都是但是设计师给我们的图都会比这个大，那么我们可以此属性来制作通天。要说页面布局的话，那就必须说说margin，padding，和background。这三个属性其实都是前面讲过的，这里还是再次讲解以下，为什么呢？因为是这样的...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
网页标准文档流中垂直方向的margin塌陷现象

摘要：在标准文档流中即没有浮动，如果设置了浮动那就不会出现这中情况了，中有两个元素，这两个元素的宽高都是，第一个设置了第二个设置了，那么实际上两个元素之间的距离是，这就是塌陷现象，并且塌陷还是以大的一方为准。在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），body中有两个div元素，这两个div元素的宽、高都是200px，第一个div设置了margin-bottom:t...

flybywind 2019-08-30 15:55 评论0 收藏0
网页标准文档流中垂直方向的margin塌陷现象

摘要：在标准文档流中即没有浮动，如果设置了浮动那就不会出现这中情况了，中有两个元素，这两个元素的宽高都是，第一个设置了第二个设置了，那么实际上两个元素之间的距离是，这就是塌陷现象，并且塌陷还是以大的一方为准。在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），body中有两个div元素，这两个div元素的宽、高都是200px，第一个div设置了margin-bottom:t...

simon_chen 2019-08-02 14:01 评论0 收藏0