margin详解垂直外边距合并.pdfVIP

Margin 的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。 ：margin-top、 margin-right、margin-bottom、margin-left。 也可以使用简写的外边距属性同时改变所有的外边距：margin:toprightbottomleft;(eg: margin:10px20px30px40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。 并且规范还提供了省略的数值写法，基本如下： 1、如果margin 只有一个值，表示上右下左的margin 同为这个值。例如：margin:10px; 就 等于 margin:10px 10px10px10px;a 2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin 的值。例如：margin:10px20px; 就等于 margin:10px20px 10px20px; 3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin 的值， 第三个值表示下margin 的值。例如：margin:10px20px30px; 就等于 margin:10px20px30px 20px; 4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如： margin:10px20px30px40px; Margin垂直外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边 距的高度等于两个发生合并的外边距的高度中的较大者。 垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元 素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表 现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)： 示例： .top{width:160px;height:50px;background:#ccf;} .middle{width:160px;background:#cfc;} .middle.firstChild{margin-top:20px;} divclass=top/div divclass=middle divclass=firstChild我其实只是想和我的父元素隔开点距离。/div divclass=secondChild/div /div 如果按照CSS规范，IE 的“良好表现”其实是一个错误的表现，因为IE 的hasLayout渲 染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如 果你读过了上面W3Shcool 的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问 题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那 么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border 或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设 置个有效的 border或者padding就可以有效的管制这个目无领导的margin 防止它越级，假 传圣旨，把自己的margin 当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个 border-top或者padding-top 即可解决这个问题。 margin在块元素、内联元素中的区别 HTML （这里说的是html标准，而不是xhtml）里分两种基本元素， block和inline。 顾名思义，block元素就是以”块”表现的元素 （block-likeelements），inline元素即是以”行” 表现的元素 （characterlevelelementsandtextstrings）。二者表现的主要差别在于，在页面文 档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。 block元素 （块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE|DL|DIV|NOSCRIPT | BLOCKQUOTE|FORM|HR |TABLE|F