CSS margin getting 'ignored' when I set the padding of the parent element to zero?

Question

I'm writing a Terms of Use page using Materialize.css, which is contained within a card-panel. I find that 'as-is', the spacing at the top is too much:

Here, the margin-top of the h4 element get added to the padding of the containing card-panel, which is 24px. I think the former is actually sufficient spacing by itself from the top of the shadowed box, so I tried setting padding-top of this card-panel to zero using the following SCSS rule:

.lucy-terms {
  .card-panel.lucy-card-panel {
    padding-top: 0;
  }
}

However, with this enabled, I find that the spacing becomes too small:

When I highlight it, it seems like the margin-top of the h4 element falls outside the box. Shouldn't the margin of the element fall within the containing element? How can I fix this?

I've included the relevant snippet below.

body {
  background-color: #f3f3f3;
}

.card-panel.lucy-card-panel {
  padding-top: 0;
}

<html>
  <head>
    <!-- Materialize.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </head>
  <body>
    <div class="container lucy-terms">
      <div class="row">
        <div class="col s12 m12">
          <div class="card-panel lucy-card-panel">
            <div class="card-content">
              <h4 class="center-align">Terms of Use</h4>
              <p class="flow-text uppercase">PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS. IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER.</p>
              <p class="flow-text">Effective date: April 2, 2018</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Looks like a normal case of [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) — j08691, Apr 09 '18 at 17:15
Indeed it looks like the 'parent and first child' case. How would I apply clearance to separate the margin-top of the `card-panel` from the margin-top of its first child block (the `h4`)? — Kurt Peek, Apr 09 '18 at 17:21

score 0 · Answer 1 · answered Apr 09 '18 at 17:21

0

I would just remove the margin from the top of the h4.

.card-content h4 { margin-top: 0; }

answered Apr 09 '18 at 17:21

LostInQuery

519
4
19

This would make the effective margin `24px`, the padding of `card-panel`, instead of the default margin of `h4`, which is not exactly what I want. (Also, if I change `h4` to `h5`, for example, I want the margin of the latter to apply). – Kurt Peek Apr 09 '18 at 17:33
I didn't understand your question to ask anything other than how to not have both the padding and the margin rendering. If you're concerned about styling the HTML tag specifically, then give the H4 a class then style off of that, and if you change it to a H5 later, it won't matter. – LostInQuery Apr 09 '18 at 17:44

score 0 · Accepted Answer · answered Apr 09 '18 at 17:34

0

I solved it by adding display: inline-block to the parent element (the card-panel):

.lucy-terms {
  .card-panel.lucy-card-panel {
    padding-top: 0px;
    display: inline-block;
  }
}

Now it looks like this:

answered Apr 09 '18 at 17:34

Kurt Peek

52,165
91
301
526

CSS margin getting 'ignored' when I set the padding of the parent element to zero?

2 Answers2