Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is there a way to detect margin-collision and prevent it? like if I have
<div style="margin-bottom: 10px;"></div>
<div style="margin-top: 10px;"></div>
I get 20px space between them, but I need 10px instead?
You do not need to do anything; by the box model specs, adjacent bottom and top margins will collapse, so you get a 10-pixel gap between your two
<div>elements as opposed to a 20-pixel gap. See this jsFiddle preview.EDIT: the reason why you’re not seeing a collapse between a
<table>ad a<div>is because a table is set todisplay: tableby default, which is not exactly the same as a block-level element, so by the specs the margins will not collapse.