0

Codepen link: https://codepen.io/AnirudhMS/pen/oNYXaNo

Hi, I've been trying to learn about grid layout and I stumbled onto this problem which I didn't notice previously. When rendering the above HTML, the html tag seems to add an additional top padding even though I specifically mentioned in the CSS that padding: 0. And also, the p tag's default top margin is overflowing into this weird space.

The simplest thing to do would probably be to remove the margin and padding for every element and define them myself. But since this is just practice code, I'm fine with the default margins and padding for all elements except html and body.

The HTML:

<body>
    <p class="note">Note: Check the console log for resources.</p>
        <div class="grid_wrapper normal_grid">
            <p>This is a p tag which is a block element.</p>
            <span>This is a span which is an inline element.</span>
            <span>And this is another span which is an inline element.</span>
        </div>
  </body>

The relevant CSS:

html, body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

Here is the part of the screen that the html tag covers:

enter image description here

And here is the part of the screen that the body tag covers:

enter image description here

As can be seen from the above two pictures, there is definitely a padding/margin of some sort between the html and the body tags. I am considering this a padding by the html tag since that seems to be as good an assumption as any.

Next, this is the area covered by the p tag: enter image description here

As can be seen, the p tag's top margin is overlapping with the gap between html and body.

Can anyone explain why this is happening?

Thanks in advance.

Edit: I thought this might be an issue of top-bottom margin collapse and tried creating a Block Formatting Context using overflow: auto and it worked but I still can't explain why it works.

Black Wind
  • 313
  • 1
  • 8

1 Answers1

1

The padding/ margin comes from the p itself not the thml body tag. You can add this to your code to test it.

p {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Practice code or not you should always start your css with a reset as you said.

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Argus

Argiris Sigalas
  • 11
  • 1
  • When I said the padding from the `html` tag, I meant actual top padding from the `html` tag. The margin on the `p` tag is different. Also, the main thing I don't get here is, why is the p tag's top-margin and the html tag's top-padding are overlapping with one another. Also, I agree that one should start with a CSS reset, but consider this to be an exception to better understand the inner workings of CSS. – Black Wind Feb 02 '21 at 18:49