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.
The problem:
An element with display: inline-block; will have a different margin than an element with display: block; even if the margin is set to for instance margin-top: 30px; for both!
The margin-top will apply for the element with inline-block, but not precisely the same as for an element with block. There will be some pixels in difference. Why?
I think what you’re referring to is the fact that margins of inline-block elements do not collapse, but on block elements they do collapse. The Box model page goes over this really well.
So what is a collapsing margin? Say you have an element with 10px margin on the bottom followed by an element with 5px margin on the top. The margin between the two will not be 15, but will collapse down to the largest of the two (10px).