phpvar 发表于 2013-12-4 18:50:24

使用css margin属性对页面布局影响的几个要点

垂直外边距合并问题:根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。

margin值在块元素、内联元素中的区别:margin值在块元素中在垂直外边距会合并,而margin也能用于内联元素,这是规范所允许的,区别在于margin-top和margin-bottom对内联元素的高度没有影响,即margin-top和margin-bottom值对内联元素无效,这倒个跟padding-top和padding-bottom值对内联元素无效是一致的!


未完待续....

参考链接:
http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html


页: [1]
查看完整版本: 使用css margin属性对页面布局影响的几个要点