>  기사  >  웹 프론트엔드  >  外层DIV中有无padding或border对于位置的影响_html/css_WEB-ITnose

外层DIV中有无padding或border对于位置的影响_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 08:57:121179검색

代码如下:


    

    

效果如下:

也就是说,如果外层DIV的位置会因为里层的位置而调整。
但如果将代码改为如下:

    

    

注意外层加了一个border,这时外层DIV位置会变化,
效果如下:

也就是说,有无border居然会影响div的摆放位置,这个怎么解释呢?
说明:padding与border的效果一样。


回复讨论(解决方案)

这个属于外边距合并的问题,参见解释
http://www.hicss.net/do-not-tell-me-you-understand-margin/

确实是外边距合并的问题
“当一个元素包含在另一个元素中时(假设没有填充或边框将空白边分隔开),它们的项和/或底空白边也发生叠加。”-- --精通CSS 26页

也就是说,内处层之间的margin会合并成一个共用的margin,这个过年一直都在想这个问题。现在终于想明白了。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.