Margin doesn't properly work? Padding doing job of margin?

Question

The problem I got is... Margin doesn't work properly for me in this example. And padding works like margin should. Why?

Print Screen:

Why? Margin in h3 that is inside div element is putting margin to this parent div element instead of h3 itself. And padding doing job of margin? I don't uderstand this... What? Why? Margin should push this h3 element away from div parent. Why it is pushing div parent from other element above him instead?

Code:

<!DOCTYPE html>
<html lang="pl">
<head>

    <meta charset="utf-8">
    <title>Philosophia Blog</title>
    <meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
    <meta name="keywords" content="filozofia, książki, blog, przemyślenia">
    <meta name="author" content="Mortinez Walles">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<style>

#aside {
    width: 315px;
    float: left;
    min-height: 500px;
}
.abox {
    margin: 10px;
    margin-bottom: 20px;
    max-width: 279px;
}
.abox1 {
    height: auto;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox1-content {
    padding: 10px;
}
#photo {
    width: 80px;
    height:80px;
    float: right;
    background-image: url("zdj.png");
    background-repeat: no-repeat;
    margin: 10px;
    border: 1px solid #000000;
    box-shadow: 1px 1px 2px 0px #000000;
}
.abox2 {
    height: 300px;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox h3 {
    text-align: center;
    margin: 0px;
    margin-top: 70px;
}
.clear {
    clear: both;
}
</style>

<aside>
        <div id="aside">
            <div class="abox1 abox">
                <div class="abox1-content">
                    <div id="photo"></div>
                    Cześć! Jestem Michał. Dzięki zarabianiu na blogu i rozsądnemu oszczędzaniu stać mnie na wiele. Chcę Ci pokazać jak zadbać o domowy budżet, wychodzić z długów, pomnażać oszczędności i samemu zadbać o godziwą emeryturę. 
                </div>
            <div class="more"><a href="#">Więcej o mnie...</a></div>
            </div>
            <div class="abox1 abox">
                <header>
                    <h3>Pobierz darmowe Materiały</h3>
                </header>
                <div class="abox1-content">
                    Już ponad 67 000 osób zapisało się na mój newsletter (zero spamu! - tylko informacje o nowych artykułach).
                    Zapisz się i otrzymasz zestaw 23 kalkulatorów Excel, które pomogą Ci policzyć koszty mediów, obliczyć raty kredytów, policzyć Twoją wartość netto, sprawdzić opłacalność kantorów internetowych, poznać sposoby kategoryzacji wydatków i wiele innych!
                </div>
            </div>
            <div class="abox1 abox">
            </div>
        </div>
    </aside>
</body>
</html>

Refer these links http://stackoverflow.com/questions/17187162/h1-h2-h3-elements-eats-div-margins and http://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element you will get clear idea — Suresh Ponnukalai, May 18 '17 at 07:14

Lynel Hudson · Answer 1 · 2017-05-18T07:12:46.320

You are experiencing CSS collapsing margins. Which means that for adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

If you inspect your h3 element you can see the h3 margin is being collapsed. This is a quirk of CSS. Using padding to push the heading down in this case seems like a good solution.

padding-top: 70px instead of margin-top: 70px on the h3 will work in this case, but for better predictability I would use padding on the h3 elements parent div:

header {
  padding-top: 70px;
}

EDIT If you want to put a border on your h3 element then you can't have padding on it. As suggested earlier you could put padding on your header element which is a parent to your heading. I'm assuming you want something like this:

Here is a snippet with all of my code below:

<!DOCTYPE html>
<html lang="pl">
<head>

    <meta charset="utf-8">
    <title>Philosophia Blog</title>
    <meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
    <meta name="keywords" content="filozofia, książki, blog, przemyślenia">
    <meta name="author" content="Mortinez Walles">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<style>

#aside {
    width: 315px;
    float: left;
    min-height: 500px;
}
.abox {
    margin: 10px;
    margin-bottom: 20px;
    max-width: 279px;
}
.abox1 {
    height: auto;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox1-content {
    padding: 10px;
}
#photo {
    width: 80px;
    height:80px;
    float: right;
    background-image: url("zdj.png");
    background-repeat: no-repeat;
    margin: 10px;
    border: 1px solid #000000;
    box-shadow: 1px 1px 2px 0px #000000;
}
.abox2 {
    height: 300px;
    box-shadow: 3px -3px 6px 0px #000000,
    -1px 1px 1px 0px #000000;
}
.abox h3 {
    text-align: center;
    margin: 0px;
    border: 2px black solid; /* added border */
    /* removed margins */
}
header {
  padding-top: 70px; /*add padding to header to keep border on h1 */
}
.clear {
    clear: both;
}
</style>

<aside>
        <div id="aside">
            <div class="abox1 abox">
                <div class="abox1-content">
                    <div id="photo"></div>
                    Cześć! Jestem Michał. Dzięki zarabianiu na blogu i rozsądnemu oszczędzaniu stać mnie na wiele. Chcę Ci pokazać jak zadbać o domowy budżet, wychodzić z długów, pomnażać oszczędności i samemu zadbać o godziwą emeryturę. 
                </div>
            <div class="more"><a href="#">Więcej o mnie...</a></div>
            </div>
            <div class="abox1 abox">
                <header>
                    <h3>Pobierz darmowe Materiały</h3>
                </header>
                <div class="abox1-content">
                    Już ponad 67 000 osób zapisało się na mój newsletter (zero spamu! - tylko informacje o nowych artykułach).
                    Zapisz się i otrzymasz zestaw 23 kalkulatorów Excel, które pomogą Ci policzyć koszty mediów, obliczyć raty kredytów, policzyć Twoją wartość netto, sprawdzić opłacalność kantorów internetowych, poznać sposoby kategoryzacji wydatków i wiele innych!
                </div>
            </div>
            <div class="abox1 abox">
            </div>
        </div>
    </aside>
</body>
</html>

Why use padding, it should be margin's job. If I make border around h3 now, it will not be around only text but aroung all padding I make. It should be margin, done, why doesn't it work. — Adrianno Barello, May 18 '17 at 06:56
As explained above. It doesn't work because of a CSS quirk known as collapsing margins. If you need a border around your `h3` element you have many options. You could use relative positioning, transform properties, or even play with margins more on the current elements. I can make an example using margins if you like. — Lynel Hudson, May 18 '17 at 07:00
It's okay. Thank you. I hope w3 will delete this margin collapsing crap asap. :) — Adrianno Barello, May 18 '17 at 07:15
Yeah. It is quite annoying when first learning. I hope you can use my code to your benefit in some way. Please accept my answer if you think it is deserving :). — Lynel Hudson, May 18 '17 at 07:17

score 0 · Answer 2 · answered May 17 '17 at 20:07

0

Margin is the outer distance to other components, wherever the padding should be used to define the distance to the margin.

Padding will arrange the content, but margin will arrange the container.

Maybe this helps:

answered May 17 '17 at 20:07

Cyber

2,194
4
22
41

Why use padding, it should be margin's job. If I make border around h3 now, it will not be around only text but aroung all padding I make. It should be margin, done, why doesn't it work. – Adrianno Barello May 18 '17 at 06:56

Margin doesn't properly work? Padding doing job of margin?

2 Answers2