Scroll in the body and the space after the block

Question

I don't understand why there is a scroll in the body and a space after the block .example. According to my logic, I make the margin-bottom 100px and then subtract these 100px from the block height max-height: calc(100% - 100px);

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    .example {
        padding: 20px;
        width: 60%;
        margin: 100px auto 0;
        max-height: calc(100% - 100px);
        border: 1px solid black;
        overflow-y: scroll;
    }

    p{
        padding: 100vh 0;
    }
    </style>
</head>

<body>
    <div class="example">
        <div class="text">
            <p>Lorem</p>
            <p>Lorem</p>
        </div>
    </div>
</body>

</html>

score 1 · Answer 1 · answered Jul 21 '21 at 03:18

Get rid of the padding on the p elements:

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    .example {
        padding: 20px;
        width: 60%;
        margin: 100px auto 0;
        max-height: calc(100% - 100px);
        border: 1px solid black;
        overflow-y: scroll;
    }

    </style>
</head>

<body>
    <div class="example">
        <div class="text">
            <p>Lorem</p>
            <p>Lorem</p>
        </div>
    </div>
</body>

</html>

Thanks for the reply. I asked about scrolling in the body – i like Cola Jul 21 '21 at 05:07 — i like Cola, Jul 21 '21 at 05:07

Roko C. Buljan · Accepted Answer · 2021-07-21T09:27:29.323

You're running into wildly inherited margins problem derived from the popular collapsed margins - issue (which is better known for when two elements with vertical margins, the two colliding margins collapse into one) - not your exact case but same in nature.
Read more on w3.org Collapsing Margins

Since you used html, body {height: 100%} and the tall .example element has margin-top 100% - the body element moved, collapsed 100px down! It basically "wildly" inherited (at least visually) those 100px margin.

An element with vertical margin can cause unwanted results with ancestors flow. One common way to fix this is to smartly avoid vertical margin, or to add overflow: auto to the ancestor that's being affected by that problem html, body in your specific case.

html, body {
  height: 100%;    /* Why would you want this? */
  overflow: auto;  /* FIX for wild margins */
}

The other solution (I'm sure there are many others) is to not use html, body {height: 100%} Rather min-height (if really needed) on html and body and vh (viewport height) unit on the .example element

html, body {
  /* min-height: 100%;  /* use min-height, but not needed */
}
.example {
  /* .... other styles */
  margin: 100px auto 0;
  height: calc(100vh - 100px); /* 100vh minus 100px margin-top */
}

Long story short - Be careful when using margin. I personally use it only when working with flexbox, or in the horizontal space (often when using inline-block elements) otherwise I always use wrappers with padding to create desired spacings which are perfectly controlled thanks to box-sizing: border-box (no need to calculate anything) - or when really necessary- I treat them with special care.

Yes, you right. I wrote my answer a second later – i like Cola Jul 21 '21 at 05:33 — i like Cola, Jul 21 '21 at 05:33

score 0 · Answer 3 · answered Jul 21 '21 at 05:29

0

Right answer its a Collapsing margins xD. To solve the problem, you can add one of the following to the body:

border
padding
overflow

answered Jul 21 '21 at 05:29

i like Cola

277
6
15

@RokoC.Buljan not sure what you mean by *widly inherited* but this is still the case of margin collapsing. Margin collapsing doesn't only happen between sibling elements but also between child and parent element (all explained within the same Sepc: https://www.w3.org/TR/CSS2/box.html#collapsing-margins *The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.* ) – Temani Afif Jul 21 '21 at 09:00
@TemaniAfif yep - those *are* collapsing margins in nature. (Added the link to my answer). The comment above is totally misleading. I'll remove it. Thx – Roko C. Buljan Jul 21 '21 at 09:27

Scroll in the body and the space after the block

3 Answers3