Why padding and margin does not work?

Question

I have the following html page:

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .box {
      height: 100%;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
</body>

</html>

As you can see, there a distance on top, although body is set to:

  margin: 0;
  padding: 0;

That's the default margin of the `p` element which breaks out of the DIV ("collapsing margins") — Johannes, Jun 01 '18 at 14:24
I would argue that the _better_ "duplicate" answer is this one: https://stackoverflow.com/questions/1828804/how-do-i-uncollapse-a-margin — random_user_name, Jun 01 '18 at 14:38

random_user_name · Accepted Answer · 2018-06-01T14:31:48.883

This is due to collapsing margins.

Essentially, the p margin is combined with the parent div margin (and then again with the body margin), to push the body down.

There are (at least) 3 ways to solve this:

Remove the margin-top from the p, which has the negative consequence of removing the margin for all p tags.
Add border-top or padding-top to the container ( .box ), which has the negative consequence of adding padding or border that you may not want.
Add overflow: [something] such as overflow: hidden to the .box container, which has the potential consequence of altering overflow in an undesired way.

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      height: 100%;
    }
    
    body {
      margin: 0;
      height: 100%;
    }
    
    .box {
      /* padding-top on the container is one solution */
      padding-top: 1px;
      height: 100%;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
</body>

</html>

`p` is a child of `div`, why is `p` able to move the whole content down? — softshipper, Jun 01 '18 at 14:27
Read the spec that I linked to, but my understanding is that in your scenario, _all_ of the top margins are collapsing into a single margin for the outermost container. — random_user_name, Jun 01 '18 at 14:28

score 1 · Answer 2 · answered Jun 01 '18 at 14:25

1

That's the default margin of the p element which breaks out of the DIV ("collapsing margins"). If you set margin: 0 for p, it will disappear, however, p elements will have less vertical distance between them then.

answered Jun 01 '18 at 14:25

Johannes

64,305
18
73
130

Antony · Answer 3 · 2018-06-01T14:34:03.607

0

Paragraphs have padding built in by default, you can either do an inline style to override it or specify that Paragraphs should have no padding by doing a global default.

<head>
  <style>
    html {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .box {
      height: 100%;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="box">
    <p style='margin:0; padding:0;'>This is a paragraph.</p>
    <p style='margin:0; padding:0;'>This is a paragraph.</p>
  </div>
</body>

</html>

Do margin and padding to be sure.

OR......

If you don't want to do this inline change your style definition by adding this after your existing .box {} class:

.box p {
  margin:0; padding:0;
}

This will apply the style to all "P" tags within the class box

edited Jun 01 '18 at 14:34

answered Jun 01 '18 at 14:25

Antony

51
2

It doesn't look like it needs to be production ready code! Yikes let's not get too purist lol :-) – Antony Jun 01 '18 at 14:28
So, keep in mind that your answer will live on for a long time. Demonstrating a solution to a problem with a less-than-desirable method (inline styles) is something many future visitors will see. So yes, I do tend to be purist, OR at least explain in the answer that this may not be desirable, but it's one way to accomplish it.... – random_user_name Jun 01 '18 at 14:33
I do like Purist and is my normal mode.. right you are cale_b for calling me out on it however that said there are times when doing this inline is desired like when manipulating the DOM dynamically and you don't want to change an entire stylesheet(s) – Antony Jun 01 '18 at 14:35

relytmcd · Answer 4 · 2018-06-01T14:36:44.543

0

You can set padding top of the .box

.box {
  padding-top: 1rem;
}

edited Jun 01 '18 at 14:36

answered Jun 01 '18 at 14:27

relytmcd

234
1
9

Why padding and margin does not work?

4 Answers4