ansaurus

Question

Answer 1

+5 A:

That behavior is called collapsing margins. The margin values are not added but the higher value is used:

Vertical margins may collapse between certain boxes:

Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. […]

[…]

Gumbo 2009-06-01 19:02:13

Is there a way to prevent this ?I don't like this behavior.

pixel3cs 2009-06-01 19:06:51

Why don’t you increase the values to 20px?

Gumbo 2009-06-01 19:12:39

I won't increase the value to 20px because I will use margin in other contexts, I will have ASP .NET controls placed randomly at runtime on different spaces

pixel3cs 2009-06-01 19:19:05

This is not 'strange' behavior. It *is* how it is supposed to work.

Traingamer 2009-06-02 13:47:37

You might be able to prevent the behaviour by using "clear:both" on the elements. I haven't tried it though.

DisgruntledGoat 2009-08-02 22:25:47

Answer 2

+1 A:

Here is a good explanation of margin collapsing. Basically, it seems that all adjacent margins will collapse into each other, per the CSS specification and against all common sense.

tghw 2009-06-01 19:06:30

Answer 3

+1 A:

if you want to have the desired effect you can use "padding" instead, margins always collapse

Rony 2009-06-01 19:12:07

padding isn't good for my purpose because I use the background-color CSS property

pixel3cs 2009-06-01 19:17:07

I think border is the right solution for this, but again, this is strange

pixel3cs 2009-06-01 19:31:29

ansaurus

tags:

views:

answers:

CSS margin strange behavior, why ?

related questions