摘要：也能用于内联元素这是规范所允许的的和属性对非替换内联元素无效例如和。解决方法把左侧块级元素更改为内联元素，比如把更换为。
CSS 边距属性定义元素周围的空间。通过使用多带带的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。
margin : [| | auto ]{1,4}
指定一个固定的宽度。可以为负数
百分比相对于该元素的包含块的宽度（相对于该块的百分比）。该值可以为负数。
浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。
margin始终是透明的(父元素设置背景, margin区域可见的)
在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。
总结：
1: margin-top和 margin-left 值得偏移相对于相邻元素margin或border; 如果没有相邻元素则包含容器的content边为及基准
2: margin-bottom和 margin-right 相对于自身进行偏移
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
合并几种情况 W3Shool CSS外边距合并
margin 在块级元素下, 他的特性可以完全体现, 上下左右任你设定。
margin也能用于内联元素,这是规范所允许的 margin的top和bottom属性对非替换内联元素无效, 例如和。
IE6中双边距Bug：
发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。
解决方法：是给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。
原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而之后对象是相对第一个对象的，所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div class的所有样式可以用在这个display inline的元素上。
IE6中浮动元素3px间隔Bug：
发生场合：发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。
解决方法：右边元素也一起浮动。
原理分析：IE6浏览器缺陷Bug。
IE6/7负margin隐藏Bug：
发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时，超出父元素部分不可见。
解决方法：去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
原理分析：IE6/7独有的hasLayout产生问题。
IE6/7下ul/ol标记消失bug：
发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。
解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。
原理分析：IE6/7浏览器Bug
IE6/7下margin与absolute元素重叠bug：
发生场合：双栏自适应布局中，左侧元素absolute绝对定位，右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。
原理分析：这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。
IE6/7/8下auto margin居中bug：
发生场合：给block元素设置margin auto无法居中
解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。
原理分析：缺少Doctype声明。
IE8下input[button | submit] 设置margin:auto无法居中
发生场合：ie8下，如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法：可以给为input加上宽度
原理分析：IE8浏览器Bug。
IE8百分比padding垂直margin bug：
发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。
解决方法：给父元素加一个overflow:hidden/auto。
原理分析：IE8浏览器Bug。
海玉 W3C
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1635.html
摘要：当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间基于文档流，理解定位模式相对定位，即相对于元素在文档流中位置进行偏移。绝对定位，即完全脱离文档流，相对于属性非值的最近父级元素进行偏移。 主要参考文档：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 测试例子：https...
深入css布局(3) — margin问题与格式化上下文 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了 盒模型与box-sizing, 元素分类，行框，定位与浮动等知识点。今天呢，我们把css布局篇做一个结尾，最后...
摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。 题目 最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示 解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...
摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。 题目 最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示 解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...
摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。 垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。 方法总结 一、绝对定...
阅读 3203·2021-09-02 15:41
阅读 2800·2021-09-02 09:48
阅读 1345·2019-08-29 13:27
阅读 1135·2019-08-26 13:37
阅读 800·2019-08-26 11:56
阅读 2450·2019-08-26 10:24
阅读 1615·2019-08-23 18:07
阅读 2597·2019-08-23 15:16
