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

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

WBOY
WBOYOriginal
2016-06-21 08:57:121175Durchsuche

代码如下:


    

    

效果如下:

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

    

    

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

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


回复讨论(解决方案)

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

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn