是否忽略元素的margin属性,直到其值等于或大于

时间:2009-09-08 19:12:32

标签: html css xhtml

1)

a)即使在CSS文件中我们没有为特定的块(例如<p>)指定 margin属性,浏览器仍会显示它,好像此块之前有一个换行符之后。这个空间(让我们称之为“默认”空间 dS )被认为是边距有一些默认值吗?


b)

  • 我认为如果我在<p>元素中添加(在CSS文件中)一个值为 1px 的margin属性,那么空间低于及高于{{1应该增加一个像素?因此,如果 dS 15 像素组成,那么新空间应该具有 16 像素的高度?

  • 但情况似乎并非如此!即,如果我将 11px 的值分配给 margin属性<p>上方和下方的空格似乎没有 26 <的高度/ em>像素( dS + 11px = 15px + 11px = 26px )。实际上,高度似乎与 margin属性分配值 1px 时的高度相同。

  • 因此,似乎在 margin属性被赋予等于或大于某个预定数量的值之前, margin属性将被忽略并且改为使用dS

4 个答案:

答案 0 :(得分:1)

好像你可能正在观察正在应用的各种浏览器的default styles for HTML 4

为了解决您的第二个问题,这个article on margin collapsing可能会有用。

摘自文章:

  

大多数块元素都有默认顶部   和底部边距,如段落   和标题,例如,可能   有1em的上下边距,   如果是,则计算为16像素   当前的字体大小。 这是什么   造成两者之间的差距   段落即可。这也是导致什么的原因   保证金崩溃非常重要。

     

[...]

     

段落顶部可能有16个像素   底部边距,而DIV为0. As   结果,DIV和DIV之间的差距   段落在每种情况下都是16像素。   这两段之间的差距是   也有16像素,即使有   两段,它们可能是   预计之间有32个像素   他们。 这是保证金崩溃。

     

[...]

     

保证金崩溃发生   顶部或底部两个(或更多)的地方   利润率很高。基本的想法   当他们触摸时,而不是   得到两个边距的总和,   使用较大的一个,另一个   被忽略了。所以在两者的情况下   段落,16像素底部边距   第一个触及16个像素   第二个上边缘。   Max(16,16)是16,之间的差距   它们是16像素

答案 1 :(得分:1)

  

1)

     

a)即使在CSS文件中我们也没有   为a指定保证金属性   特定块(如

),浏览器   仍然显示它就像这个块一样   它之前和之后的换行符。是   那个空间(让我们称之为“默认”)   空间和dS)被视为边际   一些默认值?

浏览器有一个所谓的默认样式表,它适用于元素。换行符是因为它是块样式元素。这与利润无关。

  

我会假设如果我添加(内部   CSS文件)到

元素的边距   那么值为1px的属性   

下面和上面的空间应该是   增加一个像素?所以如果dS   由15个像素组成,然后是新的空间   应该有16像素的高度?

不,如果在元素上应用边距,则会覆盖默认样式。所以它只是1px;

答案 2 :(得分:1)

这些都是非常好的问题。你能用CSS发布一些示例html来更好地描述问题#2。

对于问题#1,所有元素都有每个浏览器的默认设置,其中一些包括默认值。有些人喜欢重置所有CSS样式,以确保它们在浏览器和平台上得到某些期望。有关如何执行此操作的一个很好的示例,请参阅http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/

不同的浏览器不仅根据其盒子模型的不同解释来测量高度(参见http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41),但边缘在相邻时会倾向于“折叠”,因此存在共享空间在元素的边缘之间(见http://www.howtocreate.co.uk/tutorials/css/margincollapsing)。

希望这有帮助。

答案 3 :(得分:1)

听起来你正在遇到“崩溃边缘”。如果有两个元素的顶部/底部边距不匹配,则使用较大的值(还有其他规则可以控制边距折叠,但这是基础)。

如果您对<p>元素应用1px的边距,那么它们之间只有一个像素,但如果你有,则高于它们<h2> ,将使用<h2>(可能更大)的保证金。如果您将<p>上的上边距增加到大于<h2>上的下边距,则它们之间的间距会增加。这就是给你一个“最低保证金”的错觉。

de 增加<h2><p>之间的空间,您需要减少<h2>的底部边距 <p>的上边距。