margin属性(margin属性4个值顺序)

margin属性

在学习CSS时，遇到的很多问题都是和margin有关，这个小怪兽总是出其不意的让我的界面排版变的紊乱，还让人摸不着头脑，原因仍是在于我对他的一些特点没有进行一个深入的了解，导致我在规划之初就疏忽了一些潜在的bug。所以本文就margin特点以及常见的问题做一个总结归纳。
二、什么是margin
CSS边距特点定义元素周围的空间。经过运用独自的特点，能够对上、右、下、左的外边距进行设置。也能够运用简写的外边距特点一同改动所有的外边距。——W3School
边界，元素周围生成额定的空白区。“空白区”通常是指其他元素不能出现且父元素布景可见的区域。——CSS威望攻略
是不是看到以上的威望解释仍是不明所以？别急，我画个图你就理解了。
还不理解？那好，我给你举个栗子，假设你住在一个别墅区，每栋别墅都是一个元素，既然是别墅了那怎么着也得有个围墙吧（当然也能够没有，纯粹取决于业主喜不喜欢）。围墙就相当于上图的border边界（灰色区域），围墙与房子（上图的child即元素内容）之间的空间便是padding内边距（黄色区域），而围墙之外的空间便是外边距margin了（紫色区域），你能够作为是别墅与别墅之间的空距离离。margin存在的意图便是操控元素之间的间隔使页面排版愈加的漂亮规整，但它不属于元素的私有财产，在核算元素巨细的时分可不要把margin算在内哦，毕竟你总不能把你家门口空气算作你自己的吧，那太霸道啦！看到这儿你是不是对margin的作用范围有了大致的了解了，假如还不清楚，请继续往下看呀~
三、margin的特性
1、margin始终通明。这个特性其实能够这么理解，margin存在的意图便是为了隔开不同的元素使布局愈加的漂亮，假如margin不是通明的就无法让不同的元素发生空隙达到隔开的意图还会影响其他布局，所以margin有必要是通明的。
2、简写特性。margin特点能够设置4个值，分别是margin：toprightbottomleft；（能够依照顺时针的方法回忆，即：上右下左。顺序不能乱），这四个值也能够独自设置，即：margin-top、margin-bottom、margin-right、margin-left。除了能够独自设置之外，margin还能够进行简写（如非必要，不建议运用第三种简写），根本如下：
margin只要一个值，表明top、right、bottom、left都是同一个值。例如：margin：10px等价于margin：10px10px10px10px；
margin只要两个值，榜首值表明top、bottom的值，第二个值表明right、left的值。例如：margin：10px20px等价于margin：10px20px10px20px；
margin只要三个值，榜首个值表明top的值，第二个值表明right、left的值，第三个值表明bottom的值。例如：margin：10px20px30px等价于margin：10px20px30px20px；
3、笔直方向外边距兼并。块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会兼并为一个外边距，这样的现象称为“margin兼并”。只发生在与当时文档流方向相笔直的方向上，并且只能是块级元素。
四、margin兼并的三种场景（纵向堆叠）
1、相邻兄弟元素margin兼并。这是margin兼并中最常见、最根本的。例如：
p{
margin:1em0;
background-color:pink;
}
榜首行p>
第二行p>
作用图：
榜首行和第二行的距离仍是1em，由于榜首行的margin-bottom和第二行的margin-top兼并在了一同，并非上下相加。
2、父级和榜首个/最终一个子元素兼并。
1
2.grandfather{
3border:2pxsolidred;
4width:300px;
5height:300px;
6}
7
8.father{
9width:200px;
10height:200px;
11background-color:yellow;
12}
13
14.son{
15margin:2em0;
16background-color:pink;
17}
18style>
19
20
21<divclass=”grandfather”>
22<divclass=”father”>
23<divclass=”son”>thisissondiv>
24div>
25div>
作用图：
当给子元素增加外边距之后，父元素和子元素的上外边距（margin-top）发生了兼并，导致父元素上外边距等同于变成了子元素的上外边距（兼并的外边距值若都为正，则外边距取两者的最大值）造成了视觉上的父元素陷落但实践父元素的上外边距的值并未改动。如何阻挠这儿margin兼并的发生呢？
关于margin-top兼并，能够进行如下操作（满意一个条件即可）：
父级元素设置为块状格式化上下文元素（设置BFC），比方：给父级元素增加overflow：hidden；（推荐）
父元素设置border-top值；
父元素设置padding-top的值；
父元素和榜首个子元素之间增加内联元素进行分隔
关于margin-bottom兼并，能够进行如下操作（满意一个条件即可）：
父级元素设置为块状格式化上下文元素
父级元素设置border-bottom值
父级元素设置padding-bottom值
父级元素和最终一个子元素之间增加内联元素进行分隔
父级规划height、min-height或max-height
上面例子中在.father中增加overflow：hidden作用如下：

3、空块级元素的margin兼并。例如：
.father{
overflow:hidden;
}
.son{
margin:1em0;
}
<divclass=”father”>
<divclass=”son”>div>
div>
作用图：
此刻，.father地点的这个父级
元素高度仅仅是1em，由于.son这个空
元素的margin-top和margin-bottom兼并在了一同。
五、margin负值问题
margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，本身不受影响
margin-bottom负值，下方元素上移，本身不受影响
案列展现：
（1）margin-top为负值
（2）margin-left为负值
（3）margin-right为负值
（4）margin-bottom为负值
六、margin无效的问题
1、display:inline的非替换元素的笔直margin无效，关于内联替换元素笔直margin有用，并且没有margin兼并的问题，所以图片永远不会发生margin兼并。
2、表格中的和元素或许设置display核算值是table-cell或table-row的元素的margin都是无效的。可是假如核算值是table-caption、table或许inline-table则没有此问题，能够经过margin操控外距离，乃至::first-letter伪元素也能够解析margin。
3、margin兼并的时分，更改margin值可能是没有作用的。以父子margin堆叠为例，假设父元素设置有margin-top：50px，则此刻子元素设置margin-top：30px就没有任何作用体现，除非巨细比50px大，或许是负值。
4、肯定定位元素非定位方向的margin值“无效”。由于肯定定位元素的烘托是独立的，普通元素和兄弟元素是互相相关的，可是肯定定位元素由于独立烘托无法和兄弟元素发生联络，因而margin无法影响兄弟元素定位，所以看上去便是无效的。
5、定高容器的子元素的margin-bottom或许宽度定死的子元素的margin-right的定位“失效”。这个现象的本质和和上面肯定定位元素非对立方margin值“无效”相似。原因在于，若想运用margin特点改动本身的位置，有必要是和当时元素定位方向相同的margin特点才能够，否则，margin只能影响后边的元素或许父元素。

margin属性4个值顺序

margin-top，margin-right，margin-bottom，margin-left。方向为上右下左，顺时针方向，
值可所以：
百分比（根据父对象总高度或宽度的百分比）
长度值（界说一个固定的边距）
auto（浏览器设定的值）。
margin指的是元素边界外的间隔，padding指的是元素边界内的间隔
margin：1px1px1px1px;
padding:1px1px1px1px;