Geek Answers Handbook

When I add a marker to a nested DIV, it forces the parent DIV to receive margin instead if I do not give the parent DIV border. What for?

Has anyone else come across this? This is the second time he appears in so many years, and I'm not sure the “right” way to solve it.

I can achieve the same results with filling in the child, but it just does not make sense.

Testing in Safari / FF.

+4
source share
3 answers

I usually solve this problem by setting display: inline-block to an external div. It will force the outer div to occupy exactly the space required to display its contents.

An example showing the difference.

+4
source

This is called crash crash. When the upper and lower fields are directly touched (they are not separated by anything, for example, by a border or line break), the fields are collapsed into one stock. It's not a mistake. Read more about this here at SitePoint .

+3
source

Sounds like a crash, which is a natural behavior. It is useful to read:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

There are many ways to overcome crash problems. One way is to add a border or 1px indentation around the elements so that the borders no longer touch each other, and therefore there is no longer collapse.

Another way to terminate edges is to change the position property of the element.The CSS2 Specs explain that margins are absolutely and relatively positioned drawers not crashing. In addition, if you float in a box, the margin will no longer crash. This is not always for changing the position properties of an element, but in some situations, if you have problems with the collapse of the unwanted margin, this may be an option.

+3
source

More articles:


All Articles