Create space between the inside element and the outside one

Question

I'm a HTML beginner and I'v known that padding is the space between the content and the border, whereas margin is the space outside the border.

So if I want to create some space between the inside element and the outside one - like the effect I want from pic1 - original status to pic2 - excepted result , it's supposed to put padding-top: 100px; on the outside element instead of put margin-top: 100px; on the inside element.

So, my question is, when I put margin-top: 100px; on the inside element can't create space( pic3 - no effect css setting ) but why when I put margin-top: 300px; on the outside element can create space between body and the outside element ?

and then I tried putting both padding-top: 100px; on the outside element and margin-top: 100px; on the inside element, and I got a surprised result( pic4 - surprised result ), that margin-top: 100px; on the inside element works again! So what concept or detail I still don't understand, can anyone tells me ? by the way, this is the first time I ask question on stackoverflow :)

pic1 - original status

pic2 - excepted result put padding-top: 100px; on the outside element

pic3 - no effect css setting put margin-top: 100px; on the inside element

pic4 - surprised result put both padding-top: 100px; on outside element and margin-top: 100px; on inside element

HTML

<body>
    <div class="center outside">
        <div class="center inside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.</div>
    </div>
</body>

CSS of pic 1

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    width: 30%;
    background-color: coral;
}

.inside {
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

CSS of pic 2

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    padding-top: 100px;
    width: 30%;
    background-color: coral;
}

.inside {
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

CSS of pic 3

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    width: 30%;
    background-color: coral;
}

.inside {
    margin-top: 100px;
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

CSS of pic 4

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    padding-top: 100px;
    width: 30%;
    background-color: coral;
}

.inside {
    margin-top: 100px;
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

You need to show a **complete** markup that shows the problem. You have not supplied any HTML. [mcve] You need to search SO for "collapsing margins". — Rob, Nov 11 '17 at 15:56
Thank you @Rob ! I will check the useful article, and what dose " SO" mean? — Changhsun Wu, Nov 12 '17 at 04:03

score 0 · Accepted Answer · answered Nov 11 '17 at 16:10

Margins (especially on top and bottom) of elements collapse when they touch together or cover parent/child element margins.

As these rules may get a little complicated, not so senior css users should avoid using margins as much as possible and use paddings instead.

On your case, as parent element doesn't have border or padding, the browser uses biggest margin of parent and child and puts this around parent element.

More information here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Thank you so much ! I knew the margin collapsing happens on adjacent siblings but didn't know it also happens between parent and child element. It's clear to me now :) — Changhsun Wu, Nov 12 '17 at 04:18

Create space between the inside element and the outside one

1 Answers1