精华内容
下载资源
问答
  • 在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程。margin是css用于在一个声明中,对所有css margin属性的简写,正因为margin来控制css中的...

    在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程。

    2a2a5b439f06083da79d1f1b254b7886.png

    margin是css用于在一个声明中,对所有css margin属性的简写,正因为margin来控制css中的块级元素之间的距离,所以两者是不是可见的。【推荐学习:CSS3教程】

    一:css margin属性怎么用

    margin属性包含了很多的属性,如下所示:

    margin left :是表示设置距左内边距;

    margin top:是表示设置头顶元素块状的距离;

    margin right:是表示设置距右元素块距离;

    margin bottom :是表示设置底部块状距离

    二:css margin属性用法教程

    1.margin left用法:

    margin left:50px;语法后面紧跟着数字或者百分比,该语法表示距离左边元素块50像素点,或者距离元素50%的距离。

    为了观察实例,我们使用两个盒子:

    margin-left实例 www.divcss5.com

    .php-a,.php-b

    {float:left; width:150px; height:120px; border:1px solid #F00}

    .php-b{ margin-left:50px}

    .php-c{ margin-left:50px}

    我们可以改动数值,可以观察其中变化,但是效果都是元素左边间距的位置大小。

    2.margin right用法恰恰和margin left相反,定义为右边元素距离多少像素。

    3.margin top:50px,语法后面紧跟数字,就是表示上边间距50个像素点,也可以使用百分比来表示。

    4.margin bottom用法和margin top用法类似,并且在方向是相反的。

    假如我们想在上下左右都用margin:10px来表示,margin我们要按照顺时针转法的思维就好了。【推荐阅读:margin:auto属性的用法详解】

    以上就是对css margin属性怎么用?css margin属性用法教程的全部介绍,如果您想了解更多有关CSS3视频教程,请关注PHP中文网。

    展开全文
  • 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分:margin--基础...

    之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分:

    margin--基础知识

    margin--在同级元素(非父子关系)之间应用

    margin--在父元素和子元素之间应用(重点)

    margin--margin值的单位为%时的几种情况

    第一部分:margin--基础知识

    要介绍margin的基础知识,我们不可回避地要谈到css盒子模型(Box Model),一般而言,css盒子模型是用来设计和布局的。它本质上是一个盒子,包括:外边距(margin)、边框(border)、内边距(padding)以及最中间的内容(content)。下图即为盒子模型(这里只谈W3C规范的标准盒模型,而不谈IE5和IE6在怪异模式中使用的非标准的盒子模型):

    bbd21ff78eb3052c28d3cf72c9a1d919.png

    我们要介绍的margin在最外层,因为margin(外边距)一定是透明的,所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。从上面的盒子模型中我们可以看到,margin在四周均存在,我们可以使用margin-top、margin-right、margin-bottom、margin-left分别设置这四个方向的margin值。(注:由于这部分知识较为基础,所以我不再在这部分不做更多介绍)

    第二部分:margin--在同级元素(非父子关系)之间应用

    这一部分主要介绍水平方向和竖直方向的外边距的合并问题。

    (1)水平方向的外边距合并

    两个水平方向的盒子相遇,那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。

    例1:

    代码如下:

    水平方向的两个盒子

    *{

    margin:0;

    padding:0;

    border:0;

    }

    body{

    font-size: 0;

    }

    .left{

    width: 100px;

    height: 100px;

    background: red;

    display: inline-block;

    margin-right: 50px;

    font-size: 20px;

    }

    .right{

    width: 100px;

    height: 100px;

    background: yellow;

    display: inline-block;

    margin-left: 50px;

    font-size: 20px;

    }

    宽为100px,右边距为50px
    宽为100px,左边距为50px

    效果如下:

    505a31979c4014e72fa664af62ecff97.png

    这时两者之间的距离刚好为100px。

    补充说明:大家可以看到,为了使得两个div(块状元素)脱离正常的文档流我使用了display:inline-block;属性,另外,我还把body的font-size设置为0,这样可以解决inline-block自身的问题,否则两个div的举例会大于100px。当然使用float也可以使得两个div出现在同一行中。

    (2)竖直方向的外边距合并

    两个竖直方向的盒子相遇时,其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

    例2:

    水平方向的两个盒子

    *{

    margin:0;

    padding:0;

    border:0;

    }

    .top{

    width: 100px;

    height: 100px;

    margin-bottom: 100px;

    background: red;

    }

    .bottom{

    width: 100px;

    height: 100px;

    margin-top: 50px;

    background: green;

    }

    高为100px,下边距为100px
    高为100px,上边距为50px

    效果如下:

    853a07cf00bb6ca48c0c7ac4ec3b9a69.png

    这时我们肉眼都可以观察出来,两者竖直方向的举例大约为100px(实际就是100px)而非100+50=150px;这正是因为两个竖直方向的盒子相遇时,其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

    另外一个有趣的例子就是:假设有一个元素同时设置了margin-top和margin-bottom,但是内容为空,那么这两个margin值也会叠加,值为两者最大的一个,它类似与竖直方向上两个盒子margin值的叠加。代码如下:

    水平方向的两个盒子

    *{

    margin:0;

    padding:0;

    }

    .top{

    width: 500px;

    height: 100px;

    background: red;

    }

    .middle{

    margin-top: 100px;

    margin-bottom:50px;

    }

    .footer{

    width: 500px;

    height: 100px;

    background: green;

    }

    上面的div,高100px

    最终的效果如下:

    e423bdc4f796ddaf43520ba16be934dc.png

    我们发现这时在上面的div和在下面的div之间的举例并不是100+50=150px,而是两者中的最大者,即100px。

    那么W3C为什么会设定这样的标准而不设定和水平方向一样的标准呢?即margin值的叠加,实际上这也是有一定的道理的。比如我们需要设计一个由若干个段落构成的一个页面。我们需要设置margin-top和margin-bottom使得第一段和页面的最上方有一段距离,使得最后一段和最下方有一段距离。下面是不叠加和叠加的效果图:

    0821ef28d0ed358cfee3fcb72dfd2a00.png

    我们可以看到左边的页面没有重叠,那么两个段落之间的举例就是最上方的两倍间距了,而右边的页面发生了重叠,则所有的间距都是相等的。或许这就是这样设定标准的目的吧,谁知道呢?

    第三部分:margin--在父元素和子元素之间应用(重点)

    第二部分介绍了同级元素之间使用margin,而这一部分将要介绍最有意思的父元素和子元素之间margin的应用。这一部分,我们同样从两个方面来讨论。一方面是子元素设置水平方向上的margin值,另一方面是子元素设置竖直方向的margin值。

    (1)在子元素中设置水平方向的margin值

    我们可以设置margin-left来控制子元素的左边框和父元素的左边框之间的举例。

    例3:

    margin

    *{padding:0; margin:0; border:0;}

    .father{

    width: 500px;

    height: 500px;

    background: red;

    }

    .son{

    width: 100px;

    height: 100px;

    background: green;

    margin-left: 100px;

    }

    宽度为100px,margin-left为100px。

    我将子元素的margin-left设置为了100px;效果如下:

    e2dfd9dc42296996d28632ade89d797d.png

    即子元素的左边框和父元素的左边框之间的距离为100px。与在同级元素之间设置margin不同,因为同级元素之间的margin不会考虑到padding,但是在父元素和子元素就不同了,那么如果父元素中如果有padding,效果会是什么样的呢?请看下面一个例子:

    例4:

    下面我们在上面例子的基础上给父元素添加padding值。

    margin

    *{padding:0; margin:0; border:0;}

    .father{

    width: 500px;

    height: 500px;

    padding:100px;

    background: red;

    }

    .son{

    width: 100px;

    height: 100px;

    background: green;

    margin-left: 100px;

    }

    宽度为100px,margin-left为100px。

    上面的代码给父元素添加了100px的padding值,效果如下:

    37370047f8ce56c98c5396fdac031be2.png

    我们可以看到子元素举例上方的距离为100px,因为子元素一定是在父元素的content的部分的,这点毫无疑问。

    但是经过测量可以发现子元素的左边框距离父元素的左边框之间的距离为200px,因为其中还有100px的左padding值,前面的例子因为我没有设置padding值,所以没有观察出来,因此这就说明了在子元素中设置margin-left,其值实际上是子元素的左边框距离父元素左padding内侧的距离。

    例5:margin-right的使用和margin-left的使用是相似的,我在这里只举一个例子。

    这个例子在子元素中设置了margin-right值,如下所示:

    margin

    *{padding:0; margin:0; border:0;}

    .father{

    width: 500px;

    height: 500px;

    padding:100px;

    background: red;

    }

    .son{

    float: right;

    width: 100px;

    height: 100px;

    background: green;

    margin-right: 100px;

    }

    宽度为100px,margin-right为100px。

    这个例子与例4的区别仅在与子元素的位置不同。效果如下:

    25da2258464e49bb9452ed1e2bf5afe7.png

    通过这个例子可以说明margin-right的值是子元素的右边框和父元素的右padding内侧的距离。只是前面的几个例子我没有使用padding,所以无法观察出来。

    (2)在子元素中设置竖直方向的margin值

    按照前面的经验,理论上来说,我们同样可以通过设置margin-top的值使得子元素的上边框和父元素的上padding的内侧留有一定的距离。那么我们就试试吧!

    例6:

    margin

    *{padding:0; margin:0; border:0;}

    .father{

    width: 500px;

    height: 500px;

    background: red;

    }

    .son{

    width: 100px;

    height: 100px;

    background: green;

    margin-top: 100px;

    }

    高度为100px,margin-top为100px。

    这个例子我设置了margin-top为100px,效果如下:

    fcc5ad2e6fa9b46706df8a8dfed51a44.png

    这并不是我们想要的效果啊,我们希望子元素的上部距离父元素的上部为100px,可是我们看到的却是父元素的上部距离浏览器页面的上部有100px的距离,这是为什么呢?哪里出现问题了呢?

    实际上这是因为当父元素没有设置padding值以及border值时,出现了一个bug--父元素的上方与子元素的上方完全重合在了一起,无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。

    对于这种问题解决方法有下面几种:

    方法一:给父元素添加padding-top值

    方法二:给父元素添加border值

    方法三:给父元素添加属性overflow:hidden;

    方法四:给父元素或者子元素声明浮动float

    方法五:使父元素或子元素声明为绝对定位:position:absolute;

    方法六:给父元素添加属性 overflow:auto; positon:relative;(注:此方法为后续添加,感谢博友@小精灵Pawn提供此方法)

    方法一:基于例6,在父元素的css代码中添加padding-top:1px;效果如下:

    66d8847b117e5731ef1536f8239c0723.png

    方法的唯一缺点就是增加了1px的误差。

    方法二:基于例6,在父元素的css代码中添加border-top:1px solid transparent;效果如下:

    c7d4e93aff593eb744cddf0f1629d619.png

    同样达到了效果, 缺点同方法一。

    方法三:基于例6,在父元素的css代码中添加overflow:hidden;效果如下:

    82a5901b5f9b1690c2deca4354c05ae5.png

    同样达到了效果,并且没有任何误差的存在。堪称perfect!!!!

    方法四:给父元素或者子元素声明float;基于例6,在子元素css代码添加float:left;或者在父元素css代码添加float:left;均达到效果,这里不再展示相同的图片。

    优点:没有像素的误差。   缺点:float有时是不必要的。

    方法五:给父元素或者子元素添加position:absolute;属性。 同样达到效果。

    优点:同方法四。  且只要我们不使用top和left也不会有任何影响,所以这也是一种不错的方法。

    方法六:给父元素添加overflow:auto;和position:relative;同样达到效果。

    第四部分:margin值的单位为%时的几种情况

    之前我举例子时使用margin,它的值都是以px为单位的,这个理解起来没有问题。但是如果margin值是以%为单位呢?实际上这时候百分比(%)是相对于该元素的父元素(容器),对于同级元素和父子元素都是如此。(再次感谢 博友@小精灵Pawn 提供的建议!!基于此建议补充这部分内容) 但是在同级元素中使用竖直方向的margin时会出现意想不到的结果,下面举例说明。

    (1)同级元素在水平方向使用值为%的margin

    例7:

    margin

    *{

    margin:0;

    padding:0;

    }

    .first{

    float: left;

    width: 200px;

    height: 200px;

    background: green;

    }

    .second{

    float: left;

    width: 200px;

    height: 200px;

    background: red;

    margin-left: 20%;

    }

    宽为200,无margin
    宽为200,margin-left为20%;
    展开全文
  • 本文着重描述关于 margin,我们日常不太容易发现的“坑”。盒模型接触过 CSS 的人应该都知道 CSS 的盒模型:由内容边缘(Content...其中内容盒、内边距盒、边框盒的背景由background属性决定,而外边距盒的背景是透明...

    本文着重描述关于 margin,我们日常不太容易发现的“坑”。

    盒模型

    接触过 CSS 的人应该都知道 CSS 的盒模型:

    ab11826a3bd732fbedf91a3674c8940e.png

    由内容边缘(Content edge)包围形成的是内容盒(Content Box),类推还有内边距盒(Padding Box)、边框盒(Border Box)、外边距盒(Margin Box)。

    其中内容盒、内边距盒、边框盒的背景由background属性决定,而外边距盒的背景是透明的。

    CSS margin 属性

    关于 margin 属性,有几点可能跟我们的直觉不相符:

    1、如果 margin 的值是百分比,则是相对于父元素的内容盒宽度来计算的,即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高宽不相等,子元素的 margin 元素指定了相同的百分比值,则子元素各个方向的 margin 计算值都是相等的。

    2、margin-top 和 margin-bottom 值对行内非替换元素(non-replaced inline element)是无效的。因此我们可以指定 img 元素的 margin-top 和 margin-bottom,而非替换行内元素(如 i,span 等)设置 margin-top 和 margin-bottom 却不会产生效果。

    相邻的 margin(Adjoining margin)

    如果两个垂直方向上的 margin,它们中间没有其他垂直 margin,但它们之间不一定相接触,我们就说这两个 margin 是垂直毗连(vertical-adjacent)的,包括以下四种情况,满足其中之一即可:

    父元素的 top margin 和第一个子元素的 top margin

    父元素的bottom margin 和最后一个子元素的 bottom margin

    元素的 bottom margin 和与这个元素相邻的兄弟元素的 top margin

    如果一个元素,它没有生成 BFC、没有包含正常流的子元素、min-height是0、height是0或者 auto,则它的 top margin 和 bottom margin 也是垂直毗连的

    如果两个 margin 满足以下三个条件,我们就说这两个 margin 是相邻(adjoining)的:

    1、这两个 margin 是垂直毗连的,即满足上面四种情况之一

    2、margin 的两个元素都是正常流的块级元素,并且在同一个 BFC 中

    3、两个 margin 之间没有行盒(line box)、清除浮动后的空隙(clearance)、padding和 border

    margin 折叠(Collapsing margins)

    margin 折叠,即相邻的 margin 有可能会被折叠成一个。

    比如元素 #a 指定了 margin-bottom 为 10px,而它下方的元素 #b 指定了 margin-top 为 20px,如这样:

    6ef92b4f8125bdc68a55c7da40e93d05.png

    元素 #a 的 margin-bottom 和元素 #b 的margin-top 在位置上重叠了,它们之间的距离是 20px,即元素 #b 的 bottom margin 长度,这就是 margin 折叠现象。关于这个现象,可以这么理解:

    margin 定义的是它与其他盒子之间的最小间距。其中元素 #a 指定了 margin-bottom 为 10px,就表明它下方的元素 #b 与它至少要有 10px 的距离,它指定的是一个最小值,因此实际的距离可以比这个大。

    元素 #a 下方的元素 #b 也设置了 margin-top 为 20px,如果不折叠,则他们之间就有 30px 的距离。如果折叠成了一个 20px 的距离,则对元素 #a 来说,它的 margin-bottom 要求至少要有 10px 的距离,是满足的,而对于元素 #b 来说,它的 margin-top 要求至少要有 20px 的距离,也是满足的。

    而 margin 折叠的存在,其实是为了可以在视觉上显得更美观,也更贴近设计师的预期。

    margin 折叠规则

    并不是所有的 margin 都可以折叠,需要满足以下条件:

    垂直相邻的 margin 才有可能折叠,水平 margin 永远不折叠

    根元素(即 html 元素)的 margin 永远不折叠

    如果一个元素,它的 top margin 和 bottom margin 是相邻的,并且有清除浮动后的空隙(clearance),这个元素的 margin 可以跟兄弟元素的 margin 折叠,但是折叠后的 margin 不能跟父元素的 bottom margin 折叠。

    需要注意的是,margin 并不是只能折叠一次,多个满足要求的 margin 都可以进行折叠形成一个折叠后的 margin(collapsed margin)。

    并且假如这个折叠后的 margin 是由 margin A 等折叠而来的,如果有 margin X 跟 margin A 是相邻的,则我们也认为 margin X 跟这个折叠后的 margin 相邻。

    折叠后的 margin 大小

    当两个或者两个以上的 margin 折叠后,margin 的值计算如下:

    如果 margin 都是正数,则取他们当中的最大值

    如果 margin 中有正有负,则取最大的正数加上最小的负数(如最大的 margin 是 20px,最小的 margin 是 -20px,则他们计算后的值是 0)

    如果 margin 中都是负数,则取他们当中的最小值

    几道思考题

    浮动、定位元素的 margin 不会和其他任何元素的 margin 发生重叠,包括它的子元素。

    这是因为浮动元素脱离了正常流,所以它和其他相邻元素就不处与同一个流中,自然不相邻;又因为浮动元素的内容盒会形成一个新的 BFC,所以浮动元素跟子元素不处与同一个 BFC 中,因此它们的 margin 也不能折叠。定位元素同理可得。

    inline-block 的元素不会和其他元素的 margin 发生折叠,包括它的子元素。

    因为 margin 折叠只会发生在块级元素上,因此 inline-block 元素的 margin 不会和兄弟元素折叠,又因为 inline-block 的内容盒会形成一个新的 BFC,所以 inline-block 元素本身也不会和子元素的 margin 发生折叠

    margin 折叠的几个栗子

    栗子1

    如果两个 margin 满足以下三个条件,我们就说这两个 margin 是相邻(adjoining)的:

    两个 margin 之间没有行盒(line box)、清除浮动后的空隙(clearance)、padding和边框

    针对这个条件,我们通过增加 padding 的方式来阻止 margin 的折叠:

    93d045e967c096f434434bf471377d9b.png

    如果 #container 没有下边框,则 #container 的 bottom margin 和 #inner 的 bottom margin 是相邻的,因此它们折叠了,并且 #inner 撑开了 #container 元素,所以可以看到 #container 元素的高度变成了 10px,且显示的是 #inner 的红色背景

    ead05883e725113ccd171f33cbd3e67e.png

    当给 #container 添加一个下边框,两个 margin 之间就边框的阻隔,他们就不相邻了,因此不能折叠。所以可以看到 #container 被撑开成了 20px,其中 10px 是 #inner 的高度,还有 10px 是 #inner 的 bottom margin,并且由于 margin 是透明的,因此 #container 露出了部分蓝色的背景。

    栗子2:

    如果两个 margin 满足以下三个条件,我们就说这两个 margin 是相邻(adjoining)的:

    margin 的两个元素都是正常流的块级元素,并且在同一个 BFC 中

    我们通过创建新的 BFC来阻止 margin 的折叠:

    80e11aeca2cde59c46a7db480df6102d.png

    如上图 #container 元素和 #inner 元素同属于一个 BFC 中,#container 的 top margin 和 #inner 的 top margin 折叠,bottom margin 同理。

    但如果让 #container 跟 #innter 处在不同的 BFC 中,则 top margin 和 bottom margin 都不会折叠,如:

    546215379f82d78dacdfac299fd42e25.png

    给 #container 元素增加一个 overflow: hidden 属性,让它的内容盒生成一个独立的 BFC,而 #inner 处于这个独立的 BFC 中,因此 #container 和 #inner 就处于两个不同的 BFC 中了,所以他们的 margin 不能折叠。

    栗子3:

    如果一个元素,它本身的 top margin 和 bottom margin 是相邻的,并且有清除浮动后的空隙(clearance),这个元素的 margin 可以跟兄弟元素的 margin 折叠,但是折叠后的 margin 不能跟父元素的 bottom margin 折叠。

    dbca22de9efff244cd54d1f6b0c666bc.png

    给父元素 #container 设置了一个灰色背景,并且没有设置高度,因此高度会随着内容而扩展,margin 设置为 50px。

    其中有一个红色的浮动元素 #floated,高宽都设置为 40px。

    给 #cleared 设置了 15px 的 margin,并且元素的高度、padding、margin 都为0,因此 #cleared 元素的 top margin 和 bottom margin 是相邻的。这个元素的位置如下图所示:

    ca706c7d634bbd4f58c126051467441c.png

    因为 #cleared 元素清除了左浮动,所以 #cleared 元素下移。

    而 #cleared 元素和 #slibling 元素的 margin 折叠了,因此可以看到他们的位置是重叠的。

    7e7ea7bc3baeee3818b2f13921457c57.png

    由于这条规则的存在,导致他们折叠后的 margin 不能跟 #container 的 bottom margin 进行折叠,因此 #container 的高度被撑开。

    如果没有这条规则,他们还应该跟 #container 的 bottom margin 进行折叠,如:

    f7ea50ba77a3af320e355244e88fffe1.png

    以上这张图,在去掉了 #cleared 元素的 clear 属性之后,就不满足这条规则了,所以可以看到 #container 的高度就只有 40px,即红色的浮动元素的高度,而 #cleared 元素、#sibling 元素、#container 元素的 margin 都折叠成了一个。

    以上就是关于CSS中margin属性的使用方法介绍,希望对大家学习理解CSS中margin属性有所帮助。

    展开全文
  • 一直以来我认为它是一个很简单的属性,但是在最近的所做的项目中我遇到了一些关于 margin属性 所涉及到的问题,下面就给大家分享一下吧!! margin 属性的简单概述 说到 margin 属性 ,就必须先了解 css盒子模型...

    作者:WangMin
    格言:努力做好自己喜欢的每一件事
    CSDN原创文章
    博客地址 👉 WangMin

    众所周知 margin属性 是用来声明当前所设置或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。一直以来我认为它是一个很简单的属性,但是在最近的所做的项目中我遇到了一些关于 margin属性 所涉及到的问题,下面就给大家分享一下吧!!

    margin 属性的简单概述

    说到 margin 属性 ,就必须先了解 css盒子模型(Box Model) ,因为css盒子模型是用来设计和布局的,本质来讲是一个盒子,下面是 css盒子模型(Box Model) 的图例,如下:
    在这里插入图片描述
    从上图中可以看到 css盒子模型(Box Model) 包括:外边距(margin)、边框(border)、内边距(padding)以及最中间的内容(content),其中就包含我所要讲的 外边距(margin) ,它处于盒子模型的最外层,也就是上图中显示 margin字样 的那一层,它可以用来使不同的盒子之间留有一定的间隔从而达到布局整洁美观的效果。

    从上图中的 css盒子模型(Box Model) 中可以看到margin在上下左右四个方向都存在,也就是说我们可以使用margin-top(上外边距)margin-right(右外边距)margin-bottom(下外边距)margin-left(左外边距)分别设置这四个方向的margin值。这是margin 属性 最基本的用法,相信大家运用的很熟练了吧!!

    margin 属性的使用语法

    上面也提到了margin在上下左右四个方向都存在,可使用margin-top(上外边距)margin-right(右外边距)margin-bottom(下外边距)margin-left(左外边距)分别设置这四个方向的margin值,案例1如下:

    <div id="outer">
        <div id="inner"></div>
    </div>
    
    #outer{
         width:90px;
         height:150px;
         margin: 10px auto;
         border:1px solid #ccc;
     }
     #inner{
         width:50px;
         height:50px;
         margin-top:20px;
         margin-bottom:20px;
         margin-left:20px;
         margin-right:20px;
         background:#000;
     }
    

    网页效果如下:
    在这里插入图片描述

    所对应的盒子模型如下:
    在这里插入图片描述

    上面的例子中我是分别给元素#outer 添加了四个方向的外边距,并且外边距都相等,这样会让css在渲染的时候时间加长,并且程序性能降低,所以避免这种情况,我们可以把它简写为以下格式,所得到的效果是一样的。

    #outer{
        width:100px;
        height:100px;
        margin:20px;
        background: #f00;
    }
    

    那么可能就有人会问了,如果四个方向的外边距不一样该怎么来设置呢?当然你可以用上边的提到的分别为四个方向设置相对应的外边距,也可以利用简写的方式来设置,效果其实是一样的,案例2如下:

    <div id="outer">
        <div id="inner"></div>
    </div>
    
    #outer{
          width:150px;
          height:150px;
          margin: 10px auto;
          border:1px solid #ccc;
      }
      #inner{
          width:50px;
          height:50px;
          margin:20px 30px 40px 50px;
          background:#000;
      }
    

    网页效果:
    在这里插入图片描述

    所对应的盒子模型如下:
    在这里插入图片描述
    那么在使用margin属性简写形式应该注意的点如下:

    1、如果提供全部四个参数值,第一个参数表示上外边距,第二个参数表示右外边距,第三个参数表示下外边距,第四个参数表示左外边距。如案例2。

    2、如果只提供一个参数值,这一个参数值则表示四个方向的外边距。也就是说四个方向的外边距是相等的。 如案例1中的简写形式。

    3、如果提供两个参数值,第一个则表示上、下两边的外边距,第二个则表示左、右两边的外边距。 也就是说上、下两边的外边距相等,左、右两边的外边距相等。案例3如下:

    <div id="outer">
        <div id="inner"></div>
    </div>
    
    #outer{
         width:110px;
         height:150px;
         margin: 10px auto;
         border:1px solid #ccc;
     }
     #inner{
         width:50px;
         height:50px;
         margin:20px 30px;
         background:#000;
     }
    

    网页效果如下:
    在这里插入图片描述
    所对应的盒子模型如下:
    在这里插入图片描述
    4、如果提供三个,第一个则表示上外边距,第二个则表示左、右两边的外边距,也就说左右两边的外边距相等,第三个则表示下外边距。 案例4如下:

    <div id="outer">
        <div id="inner"></div>
    </div>
    
    #outer{
          width:110px;
          height:150px;
          margin: 10px auto;
          border:1px solid #ccc;
      }
      #inner{
          width:50px;
          height:50px;
          margin:20px 30px 10px;
          background:#000;
      }
    

    网页效果如下:
    在这里插入图片描述
    所对应的盒子模型如下:
    在这里插入图片描述

    margin外边距合并(重叠)的问题

    在使用CSS的margin属性时,会出现margin属性垂直外边距的合并(折叠)的现象。这种合并(重叠)现象分为两种: 兄弟元素的合并嵌套元素的合并

    先来了解什么是垂直外边距?margin-bottom 和 margin-top就是垂直外边距

    1、兄弟元素垂直外边距的合并

    素垂直外边距重叠要满足三个重要的原因:1) 相邻的元素 ; 2)他们都设置得有垂直的外边距; 3) 在上一个兄弟节点的外边距设置为:margin-bottom,并且下一个兄弟节点的外边距设置为:margin-top的情况下,才会出现垂直外边距重叠的情况。

    案例6如下:

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    
    .box{
        width:100px;
        height:100px;
    }
    #box1{
       background:#f00;
       margin-bottom: 20px;
    }
    #box2{
       background:#000;
       margin-top: 30px;
    }
    

    网页效果如下:

    在这里插入图片描述
    从图中可以看出给box1设置的margin-bottom: 20px的下外边距 和 box2设置的margin-top: 30px的上外边距 , 他们两个的外边距并没有求和累加为50px,而是重叠了合并为30px。这是因为 当两个元素为兄弟元素时,两者相隔的外边距,取的是两者所设置垂直margin的最大值

    那么如果给box1的margin-bottom和box2的margin-top都设置为20px,那会是怎样的效果呢?效果如下:
    在这里插入图片描述
    从上图可以看出他们两个的外边距并没有求和累加为40px,而是重叠了合并为20px。这是因为 如果相邻的两个外边距值相等,那么就取这个相等的值作为外边距

    如何解决垂直外边距重叠问题呢?假如有的时候不想让垂直外边距重叠, 应该怎么办呢? 这个问题就要说回到他们为什么重叠,就是因为他们彼此是相邻的兄弟元素! 那么我们可以让他们 不相邻 不就解决了这个问题了吗! 比如: 我们在他们彼此相邻元素之间加入一些字符,换句话说 用一些字符或者其他元素来隔开相邻的兄弟元素,那么他们彼此之间就不会产生外边距重叠的问题了。案例7如下:

    <div id="box1" class="box">box1</div>
    <span id="line"></span>
    <div id="box2" class="box">box2</div>
    
    .box{
          width:100px;
          height:100px;
          color:#fff;
      }
     #box1{
         background:#f00;
         margin-bottom: 20px;
     }
     #box2{
         background:#000;
         margin-top: 30px;
      }
      #line{
          width:100px;
          height:1px;
          display: block;
      }
    

    网页效果如下:
    在这里插入图片描述
    从上图中我们可以看见 中间的 span元素 的确起到了隔离他们,并且让他们的外边距无法再重叠!

    案例6与案例7中margin的垂直外边距都为正数,那么如果其中一个元素的margin垂直外边距为负的情况下,该怎样来计算它们的垂直外边距呢? 如下:

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    
    .box{
           width:100px;
           height:100px;
       }
       #box1{
           background:#000;
           margin-bottom: -20px;
       }
       #box2{
           background:#ccc;
           margin-top:30px;
       }
    

    网页效果如下:
    在这里插入图片描述
    从案例中可以看出两个元素的垂直外边距只有10px,是怎样计算出这10px的呢?如果相邻元素的 margin 中有正值,同时存在负值,先取出负 margin 值和正 margin 值相加就可以了。所以上述案例中最终所得到的垂直外边距为-20px+30px=10px。

    那么如果两个元素的margin垂直外边距都为负的情况下,该怎样来计算它们的垂直外边距呢? 如下:

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    
    .box{
        width:100px;
        height:100px;
    }
    #box1{
        background:#000;
        margin-bottom: -20px;
    }
    #box2{
        background:#ccc;
        margin-top:-50px;
        margin-left:10px;
    }
    

    网页效果如下:
    在这里插入图片描述
    从上图中可以看出在元素box1与元素box2的margin垂直外边距都为负的情况下,最终它们的垂直外边距取得竟然是元素box2的margin-top的值,也就是元素box2向上移动了50px,覆盖住了元素box1。由此可以得出一个结论:当 两个元素的margin 都是负值的时候,取的是其中绝对值较大的,然后从 0 位置,负向位移相应的距离。

    2、嵌套元素的合并

    当两个元素嵌套到一起,也就是一个父元素中嵌套了一个子元素,并且子元素设置了一个margin-top属性,这个时候如果没有内边距或边框把外边距分隔开时,它们的外边距也会发生合并。案例8如下:

    <div id="box1" >
        <div id="box2"></div>
    </div>
    
    #box1{
        width:200px;
        height:200px;
        background:#f00;
    }
    #box2{
        width:100px;
        height:100px;
        background:#000;
        margin-top:20px;
    }
    

    网页效果如下:

    在这里插入图片描述
    从上图可以看到 父元素box1往下移动了20px 但其实我认为是子元素box2所产生的margin-top:20px外边距把 父元素box1挤下来了! 但是我要的效果并不是这样的,我只想让子元素box2的上外边距与 父元素box1有20px的距离,效果如下:

    在这里插入图片描述
    上面也提到了如果没有内边距或边框把外边距分隔开时,它们的外边距就会发生合并,那么如果给父元素设置一个边框属性将父元素与子元素分隔开时,就可以实现我想要的效果了,代码如下:

    #box1{
        width:200px;
        height:200px;
        border:1px solid #ccc;
        background:#f00;
    }
    

    除了这种方案,其实解决这个问题的方法还有很多! 比如给父元素添加overflow:hidden、给父元素中加内容,给父元素设置padding等等。但给父元素加border 或 padding 这些属性会改变父元素的可见宽高度,并不是最佳解决方案!所以 推荐使用给父元素添加overflow:hidden来解决嵌套元素的垂直外边距合并的问题

    3、 margin水平外边距合并问题

    先来了解什么是垂直外边距? 也就是margin-left和margin-right !
    两个水平方向的元素,那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和,它们之间不存在外边距合并问题。案例9如下:

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    
    .box{
         width:100px;
         height:100px;
         float: left;
     }
     #box1{
         background:#f00;
         margin-right: 20px;
     }
     #box2{
         background:#000;
         margin-left: 30px;
     }
    

    网页效果如下:

    在这里插入图片描述

    margin值的单位为%百分比时

    以上我举例子时使用margin,它的值都是以px为单位的,这个理解起来很简单。但是如果margin值是以%为单位呢?实际上这时候百分比(%)是相对于该元素的父元素(容器),对于同级元素和父子元素都是这样。

    1、同级(兄弟)元素在水平方向使用值为%的margin,案例10如下:

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    
    .box{
        width:100px;
        height:100px;
        float: left;
    }
    #box1{
        background:#f00;
    }
    #box2{
        background:#000;
        margin-left: 10%;
    }
    

    这个例子中,两个元素都设置向左浮动,可以很清楚的看到两者水平方向的margin。其中元素box1没有设置margin,元素box2的margin-left为10%,网页效果如下:
    在这里插入图片描述
    从上图中可以看出两个div之间的间距是父元素宽度(这里的因为两个div没有被外部元素直接包裹住,所以会直接找到根元素body,父元素宽度就是指浏览器的宽度)的10%。可以通过改变浏览器的宽度来观察margin-left值的变化。

    2、同级(兄弟)元素在竖直方向使用值为%的margin

    上面也讲到同级(兄弟)元素在水平方向设置值为%的margin时,是相对于父元素的宽度,那么(兄弟)元素在垂直方向设置值为%的margin时,会不会相对于父元素的高度呢?案例11如下:

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    
    .box{
        width:100px;
        height:100px;
    }
    #box1{
        background:#f00;
    }
    #box2{
        background:#000;
        margin-top: 10%;
    }
    

    这个例子中,元素box1没有设置margin,元素box2的margin-top为10%,网页效果如下:
    在这里插入图片描述
    我们可以发现当我们缩小浏览器的高度时,元素box2竖直方向上的外间距并没有相对于浏览器的高度的改变而改变,但是当改变浏览器的宽度时,元素box2竖直方向上的外间距反而随之改变。所以可以的出一个结论:元素之间在竖直方向上使用margin,当值的单位为%时,它也是相对于父元素的宽度

    3、嵌套(父子)元素使用值为%的margin

    对于嵌套(父子)元素,如果在子元素中使用单位为%的margin,那么这个margin值是相对于父元素的宽度和高度,案例12如下:

    <div id="box1" >
        <div id="box2"></div>
    </div>
    
    #box1{
        width:300px;
        height:200px;
        background:#f00;
        overflow: hidden;
    }
    #box2{
        width:100px;
        height:100px;
        background:#000;
        margin-left: 10%;
        margin-top:10%;
    }
    

    这个例子中,父元素box1没有设置margin,子元素box2的margin-left为10%,margin-top为10%,那么根据父元素的宽度来计算子元素box2的margin-left值就是300*10%=30px,根据父元素的高度来计算子元素box2的margin-top值就是200*10%=20px,网页效果如下:
    在这里插入图片描述
    子元素box2所对应的盒子模型如下:
    在这里插入图片描述
    从上图中我们可以看出子元素box2的margin-top与margin-left都为30px,而不是上面我们计算出来200*10%=20px,这说明 子元素的margin-top值最终同样是相对与父元素的宽度而不是高度

    margin为负值

    margin外边距属性的值 是可以支持 负值的 ,如果设置负值,则元素会向反方向移动!
    1、当给一个元素设置负的margin-left值时,案例13如下:

    <div id="box1" >
        <div id="box2"></div>
    </div>
    
    #box1{
        width:300px;
        height:200px;
        background:#f00;
        margin:0 auto;
    }
    #box2{
        width:100px;
        height:100px;
        background:#000;
        margin-left: -20px;
    }
    

    网页效果如下:
    在这里插入图片描述
    子元素box2所对应的盒子模型如下:

    在这里插入图片描述
    从上图中我们可以看到子元素box2移出了父元素的左边20px。

    2、当给一个元素设置负的margin-top值时,案例14如下:

    <div id="box1" >
        <div id="box2"></div>
    </div>
    
    #box1{
        width:300px;
        height:200px;
        background:#f00;
        margin:0 auto;
    }
    #box2{
        width:100px;
        height:100px;
        background:#000;
        margin-top: -20px;
    }
    

    网页效果如下:
    在这里插入图片描述
    子元素box2所对应的盒子模型如下:

    在这里插入图片描述
    从上图中我们可以看到子元素box2移出了父元素的顶部20px。

    从上面两个例子中可以得出一个结论:当给一个元素设置margin-left和margin-top为负值时,元素就会向该方向移动相应的距离

    3、当给一个元素设置负的margin-right值时,案例15如下:

    <div id="box1" >
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>
        <span>我是一个span</span>
    </div>
    
    #box1{
        width:300px;
        height:200px;
        background:#f00;
        color:#fff;
        margin:20px auto;
    }
    .box{
        width:100px;
        height:100px;
        float: left;
    }
    #box2{
        background:#000;
        margin-right: -20px;
    }
    #box3{
        background:#ccc;
    }
    

    网页效果如下:
    在这里插入图片描述
    从上图中可以看出元素box1并没有发生改变,反而同级元素box2会向左移动20px并且覆盖了元素box1。

    4、当给一个元素设置负的margin-bottom值时,案例16如下:

    <div id="box1" >
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>
        <span>我是一个span</span>
    </div>
    
    #box1{
       width:300px;
       height:200px;
       background:#f00;
       color:#fff;
       margin:20px auto;
    }
    .box{
       width:100px;
       height:100px;
    }
    #box2{
       background:#000;
       margin-bottom: -20px;
    }
    #box3{
       background:#ccc;
    }
    

    网页效果如下:
    在这里插入图片描述
    从上图中可以看出元素box1并没有发生改变,反而同级元素box2会向上移动20px并且覆盖了元素box1。

    从上面案例15、16两个例子中可以得出一个结论:当给一个元素设置margin-right和margin-bottom为负值时,元素的位置不会相对于父元素发生任何改变,但是后面的元素会产生相同方向的位移,并覆盖自己

    利用margin实现元素居中效果

    可以利用margin-right 和 margin-left同时设置auto来实现元素居中效果。那么它的实现原理是怎样的呢?

    原理如下:如果两个水平方向都设置auto,则会将两侧的外边距设置为相同的左右外边距最大值! 也就是 浏览器会将父元素的宽度减去需要居中的元素的宽度过后剩余空间的宽度分为相等的两份分别作为需要居中的元素的左右外边距。这样一来就可以使元素自动在父元素中 水平居中了! 这个技巧也是我们经常会使用到的。
    所以我通常会简写为: margin 0 auto; 对元素进行水平居中,案例17如下:

    <div id="box1" >
        <div id="box2"></div>
    </div>
    
    #box1{
        width:300px;
        height:200px;
        background:#f00;
        overflow: hidden;
    }
    #box2{
        width:100px;
        height:100px;
        background:#000;
        margin:0 auto;
    }
    

    给box2设置了 margin:0 auto,网页效果如下:
    在这里插入图片描述
    子元素box2所对应的盒子模型如下:
    在这里插入图片描述
    从上图中可以看出子元素box2的margin-left与margin-right都为100px,是怎么得到的呢?根据上面利用margin实现居中的原理,利用 父元素的宽度-子元素的宽度/2 得到的值分别给子元素box2的margin-left与margin-right,就是(300px-100px)/2=100px。

    使用margin属性无效的元素

    行内元素垂直 margin (margin-top、margin-bottom)值不起作用。也就是说,普通的行内元素是无法使用垂直margin (margin-top、margin-bottom)的。但是行内元素水平 margin(margin-left、margin-right)是有效的。案例18如下:

    <div id="outer">
        <span id="inner">inner</span>
    </div>
    
    #outer{
          width:110px;
          height:150px;
          margin: 10px auto;
          border:1px solid #ccc;
      }
      #inner{
          color:#fff;
          margin:20px 10px 10px;
          background:#000;
      }
    

    网页效果如下:
    在这里插入图片描述


    以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!

    展开全文
  • CSS Margin属性

    2021-08-04 06:55:07
    CSS Margin属性CSS Margin属性用于定义元素周围的空间。它是完全透明的,没有任何背景色。清除元素周围的区域。顶部,底部,左侧和右侧的边距可以使用单独的属性独立更改。您还可以使用速记边距属性一次更改所有属性...
  • 二是把知识分享出来,避免各位对margin属性的误解。内容可能会有点多,但都是精华,希望大家耐心学习。以下的分享会分为如下内容:1.margin 属性的简单介绍1.1:普通流的 margin 百分比设置1.2:绝对定位的 margin ...
  • 这篇文章给大家介绍的内容是关于HTML5属性:margin属性的用法实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。Documentp{width: 100px;height: 100px;background-color: red;/* 外边距 */...
  • 浅析css的margin属性

    2021-10-22 16:31:43
    margin 简写属性在一个声明中设置所有外边距属性。...margin属性构成 margin-top:上边距 margin-bottom:下边距 margin-left:左边距 margin-right:右边距 语法 /* 应用于所有边 */ margin: 1em; m.
  • 目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 ...margin属性的值为百分比值时,无论是水平方向还是垂直方向,都是相对宽度计算的 margin合并的场景 ...
  • 本文启发于博客园一篇2016年的“深入理解css中的margin属性”文章,根据当前浏览器(chrome 71.0.3578.98(正式版本) (64 位)),加上自己的理解,每个例子都是亲测过这篇博文主要分为以下几个部分:margin--基础知识...
  • 想实现类似在表div+css,图片设置在DIV中垂直居中: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。 结构如下: CSS样式如下: div {width:300px; height:150px; ...
  • 在WPF中,控件的Margin属性是一个常见的属性 通过“Thickness”方法可以看见 所以四个参数对应的为:左上右下 例如: 就是有个控件与之相邻的控件的间距为左边距10,上边距11,右边距12,下边距13。 Margin="10,11,...
  • 要让div程度居中设置装备摆设margin属性即可。1、居中枢纽CSS代码:margin:0 automargin:0 auto为何能让div 居中批注:margin:0 auto拆分为margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;枢纽...
  • 楼主最近在复习自定义View,在复习到自定义ViewGroup这个知识点时,发现了一个问题--就是我们之前的定义ViewGroup在考虑Margin属性可能有问题。本文在解决该问题给出建议性的意见,但是不一定是正确的,如果有错误...
  • margin属性

    2021-03-31 20:47:09
    margin与元素尺寸以及相关布局 元素尺寸的相关概念: 元素尺寸:指元素的border-box。 元素内部尺寸:元素的padding-box。 元素外部尺寸:元素的margin-box。 元素尺寸和元素内部尺寸决定元素自身的尺寸大小,元素...
  • C# wpf 给Margin属性赋值

    2021-04-10 22:28:05
    NewBut.Margin = newThickness(10,10,10,10);
  • css margin属性怎么用

    2021-04-16 01:48:00
    css margin属性是一个简写属性,在一个声明中设置所有外边距属性。该属性可以有1到4个值,这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。css margin属性怎么用?定义和用法margin 简写...
  • 属性 意义 margin-top 上margin,“向上踹” margin-right 右margin,“向右踹” margin-bottom 下margin,“乡下踹” margin-left 左margin,“向左踹” 竖直方向的margin有塌陷现象:小的margin...
  • css中的margin属性

    2021-06-19 02:11:51
    之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分:margin--基础...
  • css中的margin属性详解

    2021-04-16 01:47:20
    这次给大家带来css中的margin属性详解,使用css中margin的注意事项有哪些,下面就是实战案例,一起来看一下。之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是...
  • ⑸用border属性作出水平分割线 ㈣padding与margin属性 1.对浏览器默认的设置清零,采取全局声明 注意:属性的取值,只有当它取值为零的时候,才可以省略它的单位,其他情况是不可以的。 2.取值:px,%(外层盒子的...
  • margin

    千次阅读 2021-06-13 00:53:03
    margin(CSS语法)编辑锁定讨论上传视频margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。中文名外边距[1]外文名margin编程语言CSSmargin定义...
  • CSS的margin属性写在前面更新了很多篇JavaScript和vue的文章啦,今天久违和大家分享以下css的知识点。也是我以前在第一次面试的时候被面试官问倒的问题,希望可以帮助到各位小伙伴。在css中有一个margin属性相信大家...
  • alignment介绍 Qt::Alignment alignment() const; // 获取对齐方式 void ... margin margin 属性代表显示内容的边距,相关的成员函数如下: int margin() const; // 获取边距 void setMargin(int margin); // 设置边距
  • css中margin的4个属性

    2021-06-13 00:53:46
    CSS中:margin:auto与margin: 0 auto;有什么区别CSS中:margin:auto与margin: 0 auto;有什么区别。有的网站中写的是前者意思不同。margin:auto=margin:auto auto auto auto,表示上下左右都为auto;margin:0 auto=...
  • margin属性通过单独的属性对其上、右、下、左依次进行赋值,我们常见的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道:margin:10px 15px 3px;什么意思吗?你以为它的表达意思是:m...
  • margin 外边距 水平居中 margin:0auto; 注意: 1)使用margin:0auto;的盒子,必须有width,有明确的width 2)只有标准流的盒子,才能使用margin:0auto;居中。 也就是说,当一个盒子浮动了、绝对定位了、固定定位了,...
  • 3. 支持layout_margin属性如果我们自定义的布局参数类继承自MarginLayoutParams,就自动支持了layout_margin属性了,我们需要做的就是直接在布局文件中使用layout_margin属性,然后再onMeasure和onLayout中使用...
  • CSS中的边界margin的取值也可以为负值,有时候我们不敢相信,这是一个有趣的话题,负值边界会给我们带来更多新奇的创意,让我们的工作更具刺激和挑战。来看看一个实例吧,首先看一下CSS代码:#box1,#box2{float:left...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 300,960
精华内容 120,384
关键字:

margin属性