0

JSFiddle link

I'm creating a footer for my page, and giving each paragraph a margin of 2rem. This margin should collapse to create 2rem gap in between.

The problem is, the margin seeps to be propagating to the parent div element, resulting in no spacing at the top and bottom of the footer (look at the black background in the first example). Why is this happening?

So there's no spacing, ok, probably something to do margin collapsing. So I then add (as seen in the second example) a 2rem padding to the footer div. But now the spacing is including the margin and padding, resulting in a total of 4rem! How do I get the intended 2rem spacing?

Example 1:

<div class="a">
  <p>
    First paragraph
  </p>
  <p>
    Second paragraph
  </p>
</div>

Example 2:

<div class="b">
  <p>
    First paragraph
  </p>
  <p>
    Second paragraph
  </p>
</div>
johannchopin
  • 13,720
  • 10
  • 55
  • 101
David Callanan
  • 5,601
  • 7
  • 63
  • 105
  • 1
    see : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing . example : add to p padding:0.01px or a transparent border https://jsfiddle.net/8nd7rv4o/ – G-Cyrillus Feb 14 '20 at 22:24
  • 1
    Thanks, `overflow: auto;` solved my problem. – David Callanan Feb 14 '20 at 22:26
  • In today's world you are going to want to familiarize yourself with some sort of framework that uses javascript and css classes that make your web design techniques manageable and responsive. My favorite is and will always be twitter bootstrap. I suggest checking it out. – yardpenalty.com Feb 14 '20 at 22:32
  • 1
    @yardpenalty.com I typically will create my own set of reusable components. And I think I know ~90% of CSS and its quirks, this being one of the last things I need to learn about. – David Callanan Feb 15 '20 at 10:07
  • [@David Callanan](https://stackoverflow.com/users/1541397/david-callanan) Oh, one more thing. Be careful and conscientious with `padding` because different browsers handle it differently. I like to use `margin` with a nested `div` instead of having `padding` on it's container. – yardpenalty.com Feb 15 '20 at 21:27

0 Answers0