Be the first user to complete this post

  • 0
Add to List

css: margin does not work

Once in a while when two elements with the following criteria

  • has only content (no padding and no border)
  • has vertical margins applied to it
When they touch each other the margin collapse to the larger of the two margins. In the below example, we have two boxes which satisfies the above criteria.
  • Both the boxes have 20px vertical margins. They should have 40px margins between them.
  • Due to the vertical margin collapse, they have only 20px margin between them as shown in the below pen.

[codepen_embed height="268" theme_id="0" slug_hash="obqwEq" default_tab="result" user="kavitshah8"]See the Pen vertical-margin-collapse-1 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

There are multiple solutions to solve this problem.
  • You can apply border to one of the element
  • You can apply padding to one of the element
Watch the following video to understand this concept in more detail!

Also Read:

  1. Error: can not find module 'underscore'
  2. Configuring sass with your nodejs applications
  3. Parse html response with fetch API
  4. Getting started with automation testing for webrtc applications
  5. position: relative
  6. How to horizontally center a flexible width button using only css
  7. Why use javascript strict mode
  8. position:absolute