咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS的margin属性知识总结

本篇内容介绍了“CSS的margin属性知识总结”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联是一家专注网站建设、网络营销策划、成都小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十年以来，已经为千余家航空箱各业的企业公司提供互联网服务。现在，服务的千余家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

1.margin 属性的简单介绍

1.1：普通流的 margin 百分比设置

1.2：绝对定位的 margin 百分比设置

2.margin 无法适用的元素

3.外边距折叠 (Collapsing margins)

3.1：Collapsing margins 初衷

3.2：Collapsing margins 类型

3.2.1：兄弟元素的 margin 重叠

3.2.2：父子元素的 margin 重叠

3.2.3：元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

4.折叠后 margin 的计算规则

4.1：参与折叠的 margin 都是正值

4.2：参与折叠的 margin 都是负值

4.3：参与折叠的 margin 中有正值，有负值

5.Collapsing margins 解决方法

1.margin 属性的简单介绍

在介绍margin之前，先剖上一张W3C标准盒模型的图片，以便读者可以查看相关位置。

CSS的margin属性知识总结

margin，顾名思义，叫做外边距。

margin的基本属性有以下几点

a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的大小范围。

b：margin 值可以是 宽度值、百分比值或 'auto' 这3者之一。注意，margin 必须带有单位，单位可以是像素、英寸、毫米或 em。

c：margin 百分比值是相对于父元素的 width 计算的。

d：当 margin 为 margin:10px 时，表示 top,right,bottom,left (逆时针)方向都是10px；当 margin 为 margin:10px 20px 时，表示上下方向为10px，左右方向为20px；当 margin 为 margin:10px 20px 5px 时，表示top方向为10px，左右方向为20px，bottom方向为5px；当 margin 为 margin:1px 2px 3px 4px 时，表示top方向为1px，right方向为2px，bottom方向为3px，left方向为4px。

上面通过对 margin 的简单介绍，我们知道 margin 的百分比值是相对于父元素的 width 计算的，但是普通流和绝对定位元素的margin的计算是又是不相同的。

1.1：普通流的 margin 百分比设置

在普通流元素中，margin 百分比值得计算是依据其父元素的 width 计算的。

XML/HTML Code复制内容到剪贴板

  1.   

  2.             

  

  •         

    •   

    CSS Code复制内容到剪贴板

    1. .container {   

    2.         width: 300px;   

    3.         height: 300px;   

    4.         background-color: lightpink;   

    5.         margin: 10px;   

    6.         display: inline-block;      

    7.       }   

    8.       .container .content {   

    9.         width: 120px;   

    10.         height: 120px;   

    11.         background-color: lightgreen;   

    12.         margin: 10%;   

    13.       }  

    CSS的margin属性知识总结

    可以看出， top left 方向的 margin 都是30px ( 300 * 10% = 30)。为父元素设置display是有原因的，会在下面小节提到，稍安勿躁。

    注意，margin 四个方位的值都是依据父元素的 width 计算！

    1.2：绝对定位的 margin 百分比设置

    在绝对定位元素中，父元素若设置了relative/absolute/fixed，则 margin 百分比值是依据父元素的 width 计算的；父元素若无设置relative/absolute/fixed，则 margin 百分比值是依据 整个页面的 width 计算的。

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 300px;   

    3.   height: 300px;   

    4.   background-color: lightpink;   

    5.   display: inline-block;   

    6. }   

    7. .container .content {   

    8.   width: 120px;   

    9.   height: 120px;   

    10.   background-color: lightgreen;   

    11.   position: absolute;   /*增加了改该属性*/  

    12.   margin: 10%;   

    13. }  

    CSS的margin属性知识总结

    可以看出，margin 的值计算结果不再是30px了，而是变成 137px (我的电脑页面宽度为1370px)。这是因为子元素container设置了absolute，导致子元素脱离文档流，四个方位的值是依据页面进行定位，所以 margin值才会发生变化。如果想让子元素还是依据父元素定位，可以为父元素设置 relative/fixed/absolute 其中之一个值， 这样 margin 百分比计算还是 30px，跟普通流中margin 的一样。 同学可以亲自尝试一下。

    2.margin 无法适用的元素

    　　有以下元素设置 margin 值是没有效果的。

    a：行内元素垂直 margin 值不起作用。

    b：margin 非 table 类型的元素，以及 table 类型中 table-caption, table-cell 和 inline-table 这3类。例如 TD TR TH 等，margin 是不适用的。

    c：对于行内非替换元素（例如 SPAN），垂直方向的 margin 不起作用。

    3.外边距折叠 (Collapsing margins)

    Collapsing margins，即外边距折叠，指的是相邻的两个或多个外边距 (margin) 会合并成一个外边距。margin 折叠 必须发生在普通流元素中。

    　　3.1：Collapsing margins 初衷

    　　Collapsing margins 的初衷就是为了让段落显示的更加好看。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

    CSS的margin属性知识总结

    此图来源于 W3C

    　　3.2：Collapsing margins 类型

    3.2.1：兄弟元素的 margin 重叠

    XML/HTML Code复制内容到剪贴板

      

  •  

    •   

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 300px;   

    3.   height: 300px;   

    4.   margin-bottom: 10px;   

    5.   background-color: lightpink;   

    6. }   

    7. .an-container {   

    8.   width: 300px;   

    9.   height: 300px;   

    10.   margin-top: 10px;   

    11.   background-color: lightgreen;   

    12. }  

    CSS的margin属性知识总结

    3.2.2：父子元素的 margin 重叠

    两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。

    这些 margin 都处于普通流中。

    margin-top 重叠：在没有被分隔的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.               

    3.           

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 150px;   

    3.   margin-top: 10px;   

    4.   background-color: lightpink;   

    5. }   

    6. .container .an-container {   

    7.   background-color: lightgreen;   

    8.   width: 100px;   

    9.   height: 100px;   

    10.   margin-top: 10px;   

    11. }  

    CSS的margin属性知识总结

    margin-bottom 重叠：在没有被分隔的情况下，只有在父元素的 height 是 "auto" 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。就是说，父元素的height值不能是固定高度值。如果父元素固定高度，那么margin-bottom会无效的。代码同上。

    3.2.3：元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

    XML/HTML Code复制内容到剪贴板

    1.   

    2.        

    3.    

    CSS的margin属性知识总结

    以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。

    4.折叠后 margin 的计算规则

    　　4.1：参与折叠的 margin 都是正值

    XML/HTML Code复制内容到剪贴板

    1. A  

    2.  B  

    CSS的margin属性知识总结

    在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。

    4.2：参与折叠的 margin 都是负值

    XML/HTML Code复制内容到剪贴板

    1. A  

    2.  B  

    CSS的margin属性知识总结

    当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。

    　4.3：参与折叠的 margin 中有正值，有负值

    XML/HTML Code复制内容到剪贴板

    1. A  

    2. B  

    CSS的margin属性知识总结

    如果，相邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。其实也就是正负相加就可以了。

    上面的例子最终的 margin 应该是 100 + (-50) = 50px。

    5.Collapsing margins 解决方法

    解决方法有如下：

    a：浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 ( 针对 兄弟元素)

    注意: 浮动元素 , inline-block元素 , 绝对定位元素 都属于 BFC元素。

    b：创建了块级格式化上下文(BFC, blocking formatting context )的父元素，比如说overflow:hidden，不和它的子元素发生 margin 折叠 (针对 父子元素)。

    c：给父元素添加以下内容之一都可以避免发生 margin 重叠 。如 添加内容 ， 添加 padding ， 添加 border。

    虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给指定元素添加具有指定宽度的内边距或外边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

    “CSS的margin属性知识总结”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    标题名称：CSS的margin属性知识总结
    文章路径：http://dzwzjz.com/article/pcigdg.html

    其他资讯

    分享至：
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    行业新闻 建站学堂 常见问题
    联系我们
    公司地址 人才招聘
    成都 达州
    电话：028-86922220
    地址：成都市太升南路288号锦天国际A幢1002号
    电话：028-86922220
    地址：达州市南岸区弹子石腾龙大道58号2栋21-6
    友情链接： 达州网站建设   app开发公司   小程序开发   吉安网站建设   彩乐斯贸易   Google外贸推广   重庆主机托管   成都酒店服定制   网站建设公司   网站制作   
    版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
    在线咨询
    服务热线
    服务热线：028-86922220
    TOP