margin总结

关注

原创最新推荐文章于 2026-03-26 10:53:45 发布 744 阅读 AI 写同款· GEO 优化 ›

14、微电网控制方法与建模分析本文详细探讨了微电网的控制方法与建模分析，包括逆变器的小信号状态空间模型、网络模型、负载模型及其组合形成的完整微电网模型。通过对系统特征值和灵敏度因子的分析，揭示了不同模式与系统参数之间的关系。文章还提出了多个研究问题，如岛式系统控制器设计、风力发电控制、并网变换器控制等，为微电网的稳定性分析和优化控制提供了理论支持和实践方向。阅读详情

参考张鑫旭——《CSS世界》

margin不具有兼容性问题，也就是在各个浏览器下表现一致

有滚动条的容器最好使用子元素的margin-bottom取代padding添加底部留白，因为IE和旧版Firefox浏览器是超过padding box触发滚动条，因此其padding-bottom值会在滚动的情况下被忽略。

margin实现等高布局（margin负值应用）

满足的场景：auto高度的容器内部具有多个水平排列的分栏，且各个分栏的高度始终和容器一致

先看效果：
在这里插入图片描述
代码：

//html
	<div style="overflow: hidden;">
        <div class="div-left">
            <p>111111</p>
            <p>222222</p>
        </div>
        <div class="div-right">第二栏</div>
    </div>
//css
  		.div-left,
        .div-right {
            float: left;
            width: 40%;
            margin-bottom: -1000px;
            padding-bottom: 1000px;
        }

        .div-left {
            background-color: aqua;
        }

        .div-right {
            background-color: yellowgreen;
        }

解析：

在不添加margin负值和padding默认情况下，两个子元素的margin为0，容器高度表现为最高的子元素高度。如果margin-bottom取负值，则容器底部向上移动，便会遮挡原本的子元素内容，再添加相应的padding值将遮挡的部分还原。注意，实际上最后的子元素真正的高度并不是相等的，之所以表现为等高，是因为使用了足够大的margin负值和padding值，溢出的部分被父容器hidden了，所以看起来是等高的。

margin百分比

和padding一样，margin的百分比无论是水平还是垂直方向都是相对于宽度计算
和padding不同的是，margin在垂直方向上不会影响元素内部尺寸，且margin存在合并现象。如下所示分别使用padding：50%和margin：50%实现的矩形的区别：

使用padding：50%呈现为一个正方形

    <div style="width: 300px;background-color: lightblue;">
        <div style="padding: 50%;"></div>
    </div>

在这里插入图片描述
3. 使用margin：50%呈现为宽高比为2:1的矩阵

    <div style="width: 300px;overflow: hidden;background-color: lightcoral;">
        <div style="width: 0;margin: 50%"></div>
    </div>

在这里插入图片描述
之所以这里是个2:1的长方形，是因为空的div元素的margin-top和margin-bottom合并了

margin合并

块级元素（不包含浮动和绝对定位）且和文档流（writing-mode）垂直的方向上可能发生合并，
会发生margin合并的几种情况：

相邻兄弟元素
父元素和第一个/最后一个子元素：父元素和前一个兄弟元素的margin取决于max(父元素的margin-top，第一个子元素的margin-top），举个例子，两个div垂直方向相邻，后一个div里面套一个h1标签：
    <div style="width: 400px;height: 50px;">
        <h3>TITLE</h3>
    </div> 

如果不添加h3，两个div就是紧紧相邻的，但因为h3元素本身带有margin-top值，所以将两个div分开了
发生父子margin合并的原因在于，父元素的第一个子元素的上边距如果碰不到有效的border或者padding，就会一直往祖先元素中寻找，所以解决这个问题的办法很明显：
父元素设置border-top值或padding-top
也可以，将父元素设置为BFC，或者父元素和第一个子元素之间添加内联元素

空块级元素margin合并。相邻兄弟元素之间插入一个空的div也是会发生边距合并。放置空块级元素合并的方法和上一条相同，还可以加上设置height或min-height

margin：auto

margin:auto的填充规则如下。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。由于margin的初始值为0，所以使用margin-left:auto可以实现右对齐的效果。
（2）如果两侧均是auto，则平分剩余空间，也就是水平居中。

只是需要注意，触发margin:auto的前提条件是width或height为auto时，元素是具有对应方向的自动填充特性的，所以垂直方向上margin:auto并不能实现居中的效果（块级元素水平方向自动填充，垂直为0）
因此，一种实现水平垂直居中的方式如下：

 <div style="height: 100px;margin-top: 20px;position: relative;">
        <div style="background-color: aquamarine;margin: auto;
        position: absolute;left: 0;right: 0;top: 0;bottom: 0;
        width: 100px;height: 50px;
        "></div>
    </div>

内部的div的尺寸表现为“格式化宽度和格式化高度”，和正常流一样，同属于自动填充父级元素的可用尺寸。但如果里面元素的尺寸如果超过外部尺寸，说明没有剩余可用空间了，会被当作0来处理，也就是等于没有设置margin属性值

关于margin合并，还有几个注意点：

替换元素不管display设置为什么，其margin值始终有效，且不会发生合并！
绝对定位元素非定位方向的margin值无效。例如设置left和top，则margin-right和margin-bottom就无效
定高（定宽）的父元素，子元素的margin-bottom/right不会影响父元素的外边距（不会合并现象），原因和上一条相同，默认流下，元素的定位方向是左侧和上方。除非使用了float或绝对定位等方式改变了方向。

收录于