child looses margins if parent is without borders

Question

<div id='wrapt'>
<img id='logoc' src='https://upload.wikimedia.org/wikipedia/commons/c/c7/Porto_Covo_pano_April_2009-4.jpg' alt='img'>
</div>

#wrapt{
    margin-top:45px;
    position:relative;
    background:#000;
    border-bottom:2px solid red;
    border-top:2px solid red;
}
#logoc{
    display:block;
    width:50%;
    margin:25px auto;
}

If I remove borders from #wrapt (2px solid red) - #logoc looses its margins !
So, how to keep margins without borders on parent?

This qustion is not duplicated with this.
It's not about margins/paddings on parent/child.
My question is:

Why child's margins deppends of parent's BORDERS ?

JSFIDDLE

You still have the margin, but it is outside. You have to use padding for that case. — Huelfe, Jun 26 '17 at 07:32
@Huelfe, I don't want padding on an image. The question is why margins on child deppends of parent's borders? — qadenza, Jun 26 '17 at 07:44
@bonaca this might point you in the right direction, but basically when there is no border, the margin collapses. https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element — Valeklosse, Jun 26 '17 at 07:58
@Valeklosse, ok, I see, but this is so stupid css rule, isn't it? — qadenza, Jun 26 '17 at 08:04
@bonaca - No, it's essential. Something as basic as paragraph spacing wouldn't work properly without collapsing margins. — Alohci, Jun 26 '17 at 08:45
@Alohci, I would say that it's essential borowser should recognize if something is image vs paragraph, and collaps margins on paragraph only. — qadenza, Jun 26 '17 at 09:04
@bonaca - The browser does. Images are by default inline. Their margins won't collapse. But you undermine that by assigning them `display:block`. — Alohci, Jun 26 '17 at 09:12
@Alohci, of course, but it's still an image and not paragraph. — qadenza, Jun 26 '17 at 09:58

score 2 · Answer 1 · answered Jun 26 '17 at 07:33

2

#wrapt{
    margin-top:45px;
    position:relative;
    background:#000;
  text-align:center;
}
#logoc{
    display:inline-block;
    width:50%;
    margin:25px auto;
}

Using an inline block and center aligning will work, the inline-block adheres to the top and bottom margin.

answered Jun 26 '17 at 07:33

Valeklosse

1,017
3
19
36

I don't want `text-align:center` on parent because of other elements inside. The question is why margins on child deppends of parent's borders? – qadenza Jun 26 '17 at 07:42

score 1 · Accepted Answer · answered Jun 26 '17 at 07:34

1

Add padding in #logoc class and remove border from #wrapt class

#logoc {
    display: block;
    width: 50%;
    margin: 25px auto;
    padding: 10px;
}

answered Jun 26 '17 at 07:34

Dixit

1,359
3
18
39

I don't want padding on an image. The question is why margins on child deppends of parent's borders? – qadenza Jun 26 '17 at 07:41
this link will help you to understand. https://stackoverflow.com/questions/16880851/padding-on-parent-versus-margin-on-child – Dixit Jun 26 '17 at 07:43
Your link is about margins and paddings on parent/child. There is nothing about borders. Why child's MARGINS deppends of parent's BORDERS? – qadenza Jun 26 '17 at 07:49
@bonaca - read the first and, in particular, third answer of the question to which this is a duplicate. – Alohci Jun 26 '17 at 07:57

score 1 · Answer 3 · answered Jun 26 '17 at 07:43

1

you can do it by floating these two elements and adding actual widths to both elements:

    #wrapt{
        margin-top:45px;
        position:relative;
        background:#000;
        float:left;
        width:100%;
    }
    #logoc{
        display:block;
        float:left;
        width:50%;
        margin:25px 25%;
    }

answered Jun 26 '17 at 07:43

jkwiatkowski

21
1

I don't want padding on an image. The question is why margins on child deppends of parent's borders? - this is because that parent item is empty, the olny content of that elements was that boarder – jkwiatkowski Jun 26 '17 at 07:44
No, border is not a content, border is border. btw I have other elements inside, absolutely positioned, but they are not relevant here. – qadenza Jun 26 '17 at 07:59
exactl, hence when it's set to be posioned abolute to the parent relative div without width, height or float, it's more less being couted as empty div (no content inside) – jkwiatkowski Jun 26 '17 at 11:34

child looses margins if parent is without borders

3 Answers3