Margin affecting parent > sibling items?

Question

Why does .ibg .im margin setting effect the text alignment?

I've tried finding a solution to this but the vagueness of the search terms aren't bringing up results in Google.

Can anyone shed light on this? Any assistance appreciated.

Fiddle here: http://jsfiddle.net/775zA/1/

To see my issue, remove the margin from the .ibg .im CSS rule.

enter image description here

CSS

body {
  padding-top: 50px;
}
.ibg {
    width: 48px;
    height: 48px;
    display: inline-block;
}
.ibg .im {
    margin: 8px;
}
.olist {
    font-size: 18px;
    font-weight: bold;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    list-style: none;

}
.olist li {
    list-style: none;
}
.olist .lbl {
    margin-left: 10px;
    display: inline-block;
}

HTML

    <div class="container">
      <div class="starter-template">
        <ul class='olist'>
          <li>
            <div class='ibg' style='background-color: #B1BF54'>
              <div class='im'>
                <img src='http://placehold.it/32x32/000000/ffffff&text=img' />
              </div>
            </div>
            <div class='lbl'>Title here</div>
          </li>
        </ul>
      </div>      
    </div><!-- /.container -->

UPDATE

So it seems that this question touches on this subject: CSS Margin Collapsing. However it does not address a way to remove the sibling padding/margin.

Say I wanted to to have text occur in line with the top of the green box... is there no way to do this without position:relative; and top:-8px? That solution seems unnecessarily hackish response to a very strange CSS quirk

Setting `vertical-align: top` to `.lbl` may be what you need, see demo in my posted answer. — Marc Audet, Jun 28 '14 at 19:16
Also related to this question: http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element — Simon East, Jul 30 '15 at 04:16

Marc Audet · Accepted Answer · 2014-06-28T19:21:59.880

Consider your HTML:

<div class="container">
    <div class="starter-template">
        <ul class='olist'>
            <li>x
                <div class='ibg' style='background-color: #B1BF54'>
                    <div class='im'>
                        <img src='http://placehold.it/32x32/000000/ffffff&text=img' />
                    </div>
                </div>
                <div class='lbl'>Title here</div>
            </li>
        </ul>
    </div>
</div><!-- /.container -->

I added the letter x at the start of the li element to illustrate where the default base line is located, which in this case, is the bottom of the character x.

After the x, you have the inline-block .ibg which contains an image nested in a block level element .im (but this block simply lies within the parent inline-block, so it does not affect the baseline in this case). By default, the bottom of the image will be aligned on the baseline determined by the parent element, in this case, the li element.

You then have the .lbl element, which is also inline-block, so the bottom of that text box is also aligned with the baseline determined by the li.

If you were to change the line-height of the li or vertical-align, you would see the effect.

In fact, you can change the vertical-align value on each of the inline elements to get a staggered effect, as shown in the demo:

http://jsfiddle.net/audetwebdesign/9R4zn/

sample

Key Point: The parent element sets the base line level for the enclosed inline elements (even deeply nested inline blocks).

Great answer, very well written. Thanks for your help Marc! – 1owk3y Jun 28 '14 at 19:23 — 1owk3y, Jun 28 '14 at 19:23

score 1 · Answer 2 · answered Jun 28 '14 at 18:41

1

make both .ibg and .lbl vertical-align:middle

http://jsfiddle.net/775zA/2/

answered Jun 28 '14 at 18:41

ry4nolson

829
4
13

1

That may solve my issue but doesn't answer my question as to *why* – 1owk3y Jun 28 '14 at 18:42
2

because browser default is ```vertical-align:baseline``` – ry4nolson Jun 28 '14 at 18:44
I mean, it doesn't explain why the CSS of a deeply nested item is affecting the parents and siblings. – 1owk3y Jun 28 '14 at 18:45

score 0 · Answer 3 · answered Jun 28 '14 at 18:47

0

Try this

.ibg, .olist .lbl{
 vertical-align:middle
}

answered Jun 28 '14 at 18:47

amol

1,535
9
10

1

That may solve my issue but doesn't answer my question as to *why* – 1owk3y Jun 28 '14 at 18:49

Margin affecting parent > sibling items?

3 Answers3