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
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!
[youtube https://www.youtube.com/watch?v=1uZeD9-r1y0]
Also Read:
- css - circular profile pictures
- How to set a box shadow on left or right only or just on a single slide
- es6 iterators and iterables - creating custom iterators
- Two column layout in css
- Using es6 modules with simple examples