Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

css: margin does not work

Once in a while when two ele­ments with the fol­low­ing criteria

  • has only con­tent (no padding and no border)
  • has ver­ti­cal mar­gins applied to it

When they touch each other the mar­gin col­lapse to the larger of the two margins.

In the below exam­ple, we have two boxes which sat­is­fies the above criteria.

  • Both the boxes have 20px ver­ti­cal mar­gins. They should have 40px mar­gins between them.
  • Due to the ver­ti­cal mar­gin col­lapse, they have only 20px mar­gin between them as shown in the below pen.

See the Pen vertical-margin-collapse-1 by Kavit Shah (@kavitshah8) on Code­Pen.

There are mul­ti­ple solu­tions to solve this problem.

  • You can apply bor­der to one of the element
  • You can apply padding to one of the element
Watch the fol­low­ing video to under­stand this con­cept in more detail!

You may also like...