Margin是什么?css
CSS 边距属性定义元素周围的空间。经过使用单独的属性，能够对上、右、下、左的外边距进行设置。也能够使用简写的外边距属性同时改变全部的外边距。——W3Schoolweb
我比较喜欢使用“外边距”这个词来解释margin（同理padding能够称之为“内边距”，可是我又偏偏喜欢称呼padding为“补白”或者“留白”），咱们能够很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。性能
Margin的特性 :spa
margin始终是透明的。orm
margin经过使用单独的属性，能够对上、右、下、左的外边距进行设置。element
外边距的 margin-width 的值类型有：auto | length | percentageinput
margin在块元素、内联元素中的区别:it
margin在块级元素下，他的性能能够彻底体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身以前的元素有margin距离。若是元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要须要印证上面的垂直外边距合并的知识）io
margin也能用于内联元素，这是规范所容许的，可是margin-top和margin-bottom对内联元素（对行）的高度没有影响，而且因为边界效果(margin效果)是透明的，他也没有任何的视觉影响。table
这是由于边界应用于内联元素时不改变元素的行高度，若是你要改变内联元素的行高即相似文本的行间距，那么你只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height，由于内联元素是一行行的，定一个height的话，那这究竟是整段inline元素的高呢？仍是inline元素一行的高呢？这都说不许，因此统一都给每行定一个高，只能是line-height了。
margin-top/margin-bottom对内联元素没有多大实际效果，不过margin-left/margin-right仍是可以对内联元素产生影响的。应用margin:10px 20px 30px 40px;，左边这个css若是写在inline元素上，他的效果大体是，上下无效果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你能够自行尝试一番。
最后在内联元素中还有上文咱们提到的非可置换inline元素（non-replaced element），这些个元素img|input|select|textarea|button|label虽然是内联元素，但margin依旧能够影响到他的上下左右！
总结下来margin 属性能够应用于几乎全部的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，并且垂直外边距对非置换内联元素（non-replaced inline element）不起做用。