Is the CSS border collapsing?
I am working with Google Chrome on OS X and it looks like I am facing a crash problem. I have two divs stacked on top of each other, both with a 2px top-edge and 5px bottom-edge, and both with a 1px-border. According to my arithmetic, there should be 1 + 1 + 2 + 5 = 7px of space between the content areas in the divs, so how does the border prevent the edges from crashing?
More confusing is that where I have a div with a border of 3px and 0 margin-top under one of the previously described divs, I get 9px of space (as I so badly wish). The only difference between divs is an extra class that shrinks the border and overrides margins, so both divs have the same padding (only padding-bottom is 0). Can anyone point out where I went wrong?
a source to share
Borders consume some of the margin space. Adjacent fields are crumbling.
Ignore the border for a moment. Let's say you have two choices. The top has a 2px margin bottom. The bottom side has a 5px top edge. What is the space between them? Correct answer: 5px, the maximum of the two values. It is not additive.
Now add 1px borders to each one and you will reduce that margin to 3px.
a source to share
Perhaps a parent class with a higher weight or ID has a higher priority (you know the ID has more specificity or parent, etc. These are complex hierarchy relationships (or you have an important one, somewhere)), and that it has margin: 0 or padding: 0, somehow.
Anywa, easier to guess with a chunk of html and its css ... :) Because there could be a lot of things.
a source to share