Be the first user to complete this post
|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
- Both the boxes have 20px vertical margins. They should have
40pxmargins between them.
- Due to the vertical margin collapse, they have only
20pxmargin 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!
- position: relative
- Resolved - Error: Could not load the bindings file. Tried
- Making max width work in internet explorer
- css : center element vertically and horizontally
- Getting started with es6 iterators and iterables