《
为你解答margin的一些疑问》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233G32013.htm
Margin是什么
IE6/7/8下auto margin居中bug：
发生场合：给block元素设置margin auto无法居中
解决方法：出现这种bug的起因通常是没有Doctype，而后触发了ie的quirks mode，加上Doctype申明就可以了。在《战胜IE的葵花宝典》里给出的办法是给block元素增添一个width可以解决，但依据自己亲测，加with此种方式是无效的，如果没有Doctype即便给元素增加width也无奈让block元素居中。
原理分析：缺乏Doctype声明。
外边距的 margin-width 的值类型有：auto | length | percentage
垂直外边距合并问题
如果依照CSS规范，IE的“良好表示”实在是一个过错的表现，由于IE的hasLayout渲染导致了这个“表现良好”的外观。而其他尺度浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很轻易探讨这个问题了。这个问题发生的原因是根据标准，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会跟其内部文档流中的第一个子元素的上边距重叠。
负margin技术及其应用
总结下来margin 属性可以应用于简直所有的元素，除了表格显示类型（不包含 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。
其中有类特别的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别个别inline元素（相对而言，称non-replaced element）是：这些元素领有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。
个人以为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局离开元素使元素与元素互不相关；padding用于元素与内容之间的距离，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
IE6中浮动元素3px间隔Bug：
发生场合：发生在一个元素浮动，然后一个不浮动的元素天然上浮与之凑近会出现的3px的bug。
解决方法：右边元素也一起浮动；或者为右边元素添加IE6 Hack _margin-left:-3px;从而打消3px间距。
原理分析：IE6浏览器缺点Bug。
我比拟爱好应用“外边距”这个词来说明margin（同理padding能够称之为“内边距”，然而我又偏偏喜欢称说padding为“补白”或者“留白”），咱们可以很明白的懂得到margin的最基础用处就是把持元素周围空间的距离,为何没法从百度搜索获得流量，从视觉角度上到达彼此隔开的目标。
margin在块元素、内联元素中的区别
实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“畸形”，标准浏览器下查看出现“bug”)：
4、如果margin有四个值，那这四个值分辨对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;
margin也能用于内联元素，这是规范所容许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且因为边界效果(margin效果)是透明的，他也没有任何的视觉影响。
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。
IE6/7负margin暗藏Bug：
发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时，超越父元素局部不可见。
解决方法：去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
原理分析：IE6/7独占的hasLayout产生问题。
你真的了解margin吗？你知道margin有什么特征吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的差别？什么时候该用padding而不是margin？你知道负margin吗？你晓得负margin在实际工作中的用途吗？常见的阅读器下margin涌现的bug有哪些？……
[ 提醒：你可先修改部门代码，再按Ctrl+A 全体抉择 ]
Margin的特性
也可以使用简写的外边距属性同时转变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方法是元素周围正上方顺时针“上右下左”记忆。
林林总总写了那么多，最后总结一些浏览器中常见的margin Bug吧，以后碰到margin下的布局问题可以查看这里找到解决的方案，如果你还发明其他对于浏览器下margin的Bug你可以发表留言，核查采用后我会及时添加进去，感激你的分享：
2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
IE8百分比padding垂直margin bug：
发生场合：当父元素设置了百分比的padding,为什么要有交互设计和交互设计能够解决什么问题，子元素有垂直的margin的时候，就似乎父元素被设置了margin一样。
解决方法：给父元素加一个overflow:hidden/auto。
原理分析：IE8浏览器Bug。
<html xmlns=" <head> <title>垂直外边距合并</title> <style> ,为什么要使用CSS.top{width:160px; height:50px; background:#ccf;} .middle{width:160px; background:#cfc;} .middle .firstChild{margin-top:20px;} </style> </head> <body> <div class="top"></div> <div class="middle"> <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div> <div class="secondChild"></div> <,为什么代码维护，重构比较难;/div> </body> </html>
何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要互相对消时。如15px + 20px的margin，将得到20px的空白。
IE8下input[button | submit] 设置margin:auto无法居中
发生场合：ie8下，如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法：可以给为input加上宽度
原理分析：IE8浏览器Bug。
--> [
网站建设之]为你解答margin的一些疑难
margin始终是透明的。
何时应该时用padding：
须要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，盼望即是两者之和时。如15px + 20px的padding，将得到35px的空白。
在实际应用中，个人不推举使用三个值的margin，一是容易记错，二是不容易日后修正，一开始如果写成margin:10px 20px 30px;日后需要修改为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费劲且不谄谀，不如一开始就老诚实实的写成margin:10px 20px 30px 20px;来的切实，不要为了当初节俭俩个字节而让日后再次开发的本钱回升。
这是因为边界应用于内联元素时不改变元素的行高度，如果你要改变内联元素的行高即相似文本的行间距,为什么人们喜欢翻页效果？，那么你只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height，因为内联元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？这都说不准，所以同一都给每行定一个高，只能是line-height了。
HTML（这里说的是html标准,为什么中文网页的布局和英文网页布局差别那么大，而不是xhtml）里分两种根本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素等于以”行”表现的元素（character level elements and text strings）。二者表现的主要差异在于，在页面文档中block元素另起一行开端，并独有一行。inline元素则同其他inline元素共处一行。
为什么必定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢？答案你可以参考另外一篇文章用Margin还是用Padding里找到谜底。
或者有友人对非置换元素（non-replaced element）有点怀疑，略微辅助大家理解一下。非置换元素，W3C 中没有给出明白的定义，但我们从字面可以懂得到,中文版Chrome下不能显示小于12px的字号如何解决，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含意，就懂了非置换元素。置换元素，W3C中给出了定义：
IE6/7下margin与absolute元素重叠bug：
产生场所：双栏自适应布局中，左侧元素absolute相对定位，右侧的margin撑开间隔定位。在IE6/7下左侧利用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法：把左侧块级元素更改为内联元素，比方把div调换为span。
原理剖析：这是因为IE6/IE7浏览器将inline水平标签元素和block程度的标签元素没有加以辨别厚此薄彼渲染了。属于IE6/7浏览器渲染Bug。
1、如果margin只有一个值，表现上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;
边界，元素四周天生额定的空缺区。“空白区”通常是指其余元素不能呈现且父元素背景可见的区域。——CSS威望指南
Tag：margin margin
这里我截取了部分另外一篇文章的内容，详细内容请见用Margin还是用Padding
CSS 边距属性定义元素周围的空间。通过使用独自的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
从定义中我们可以理解到，置换元素（replaced element）重要是指 img, input, textarea,中文排版CSS心得, select, object 等这类默认就有 CSS 格局化表面范畴的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。
inline元素（内联元素）大体有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
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的元素上。
用Margin还是用Padding
普通说来这个问题解释到这里，大多数文章就不会再深刻下去了，但作为一名实战开发者，最求的是知其然知其所以然，底本使用margin-top就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“补充修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强迫在父元素上使用border-top和padding-top，不舒畅，也不容易记住，下次再发生这样的情况还是会忘却这条准则，而且在页面设计稿里如果不需要border-top加个上边框，这么一加反而画蛇添足，为当前修改留下隐患。
3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非非常了解。介于此我盘算写下这篇文章，一来是自己工作中的总结，也是对自己常识的一次梳理。
最后在内联元素中还有上文我们提到的非可置换inline元素（non-replaced element），这些个元素img|input|select|textarea|button|label固然是内联元素，但margin仍旧可以影响到他的上下左右！
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会一直一层一层的找本人“引导”(父元素，先人元素)的麻烦。只有给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin避免它越级，假传诏书，把自己的margin当领导的margin履行。
对于垂直外边距合并的解决计划上面已经解释了，为父元素例子中的middle元素增添一个border-top或者padding-top即可解决这个问题。
IE6/7下ul/ol标志消散bug：
发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消逝。
解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。
原理分析：IE6/7浏览器Bug
在margin所有的实际应用中，负margin技术是我学习css路上最主要一课之一，很多高等应用和页面上的疑难杂症都可以用负margin技术来实现。margin技巧是那么的有用，限于篇幅我又不想草草了事，所以我决议专门为他写一篇文章，具体的阐明他的效果、原理、及其应用。在此之前你可以先浏览怿飞写的由浅入深漫谈margin属性这篇文章，大致了解“margin参考线”的概念，之后再来查看负margin技术及其应用这篇文章。
margin-top/margin-bottom对内联元素不多大实际效果，不外margin-left/margin-right仍是可能对内联元素发生影响的。运用margin:10px 20px 30px 40px;，左边这个css假如写在inline元素上，他的效果大抵是，高低无后果，左边离他相邻元素或者文本距离为40px，右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。
常见的浏览器下margin出现的bug
并且规范还供给了省略的数值写法，基本如下：
block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(跟着html5标准的推动，一些元素将被废止，而一些新的元素将被引入)留神的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。
别被上面这个名词给吓倒了，简略地说，外边距合并指的是，当两个垂直外边距相遇时，它们将构成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识,中文字体在CSS中的表达方式。
margin在块级元素下，他的机能可以完全部现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于本身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）
(责任编辑：网站建设)
为你解答margin的一些疑问相关文章