Is margin property of an element ignored until its value is equal or greater than...

Question

1)

a) Even if inside CSS file we don’t specify a margin property for a particular block ( like <p> ), browser still displays it as if this block has a linebreak before and after it. Is that space ( let’s call that “default” space a dS ) considered a margin with some default value?

b)

• I would assume that if I add ( inside CSS file ) to a <p> element a margin property with a value of 1px, then space below and above <p> should be increased by one pixel? So if dS consists of 15 pixels, then new space should have the height of 16 pixels?

• But that doesn’t seem to be the case! Namely, if I assign a value of 11px to margin property, space above and below <p> doesn’t appear to have the height of 26 pixels ( dS + 11px = 15px + 11px = 26px). In fact, the height appears to be the same as when margin property was assigned a value of 1px.

• So it would seem that until margin property is assigned a value equal or greater to some predetermined number, the margin property is simply ignored and dS is used instead?

Answer 1

Seems like you're probably observing some variety of a browser's default styles for HTML 4 being applied.

To help with your second question, this article on margin collapsing might be useful.

Excerpt from Article:

Most block elements have a default top and bottom margin, such as paragraphs and headings for example, which may have a top and bottom margin of 1em, which computes to 16 pixels if that is the current font size. This is what creates the gap between two paragraphs. It is also what causes margin collapsing to be so important.

[...]

Paragraphs may have 16 pixels top and bottom margins, while DIVs have 0. As a result, the gap between the DIV and paragraph is 16 pixels in each case. The gap between the two paragraphs is also 16 pixels, even though there are two paragraphs, and they may be expected to have 32 pixels between them. This is a margin collapse.

[...]

Margin collapsing happens wherever two (or more) top or bottom margins are touching. The basic idea is that when they touch, instead of getting the sum of the two margins, the bigger one is used, and the other is ignored. So in the case of the two paragraphs, the 16 pixel bottom margin of the first one touches the 16 pixel top margin of the second one. Max(16,16) is 16, so the gap between them is 16 pixels.

Answer 2

These are very good questions. Can you please post some sample html with CSS to better describe question #2.

As for question #1, there are per-browser default settings for all elements, and some of this does include margin defaults. Some people like to reset all CSS styles so that they are guaranteed certain expectations across browsers and platforms. See http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/ for a good example of how to do this.

Not only do different browsers measure height differently based on different interpretations of their box model (see http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41), but margins have a tendency to "collapse" into each other when they are adjacent, so there is shared space between the margins of elements (see http://www.howtocreate.co.uk/tutorials/css/margincollapsing).

Hope this helps.

Answer 3

It sounds like you're running into "collapsing margins". If you have two elements with mismatched top/bottom margins, the larger value is used (there are other rules which govern margin collapsing, but that's the basics).

If you apply a 1px margin to your <p> elements, they'll have just one pixel between them, but if you have, say, an <h2> above them, the <h2>'s (presumably larger) margin will be used. If you increase the top margin on your <p>s to be larger than the bottom margin on your <h2>, then the space between them will increase. This is what's giving you the illusion of a "minimum margin".

To decrease the space between an <h2> and a <p>, you'll need to reduce both the <h2>'s bottom margin and the <p>'s top margin.