Why is the height of my inline-block element smaller than the image inside of it?

Question

.left-icons is inline-block and has a height of 21px:

Note that the height of the image inside of it is 38px:

CSS Tricks says:

If the height of the containing block is not specified explicitly, and the element is not absolutely positioned, the value of its height computes to auto (it will be as tall as the content inside it is, or zero if there is no content).

The height of the containing block isn't being explicitly specified. So why is my outer element smaller than the image inside of it?

HTML

<div class='tango-directive-template'>

<div class='tango level-{{ level }}'>
  <span class='left-icons'>
    <img
      ng-show='tango.children.length > 0'
      src='/assets/images/show-arrow.png'>
    <span class='author'>A</span>
  </span>
  <textarea
    ng-focus='focus = true;'
    ng-blur='focus = false;'
    rows='1'>{{ tango.text }}</textarea>
  <p class='menu' ng-show='focus'>
    <span class='glyphicon glyphicon-indent-left'></span>
    <span class='glyphicon glyphicon-indent-right'></span>
    <span class='glyphicon glyphicon-arrow-down'></span>
    <span class='glyphicon glyphicon-arrow-right'></span.
  </p>
</div>

<tango
  ng-repeat='subtango in tango.children'
  tango='subtango'
  level='{{ +level + 1 }}'>
</tango>

</div>

CSS

.tango-directive-template {
  .tango {
    margin-bottom: 20px;
    .left-icons {
      display: inline-block;
      text-align: right;
      width: 67px;
      img, .author {
        position: relative;
        bottom: 15px;
        margin-right: 5px;
        height: 100%;
      }
      img {
        height: 20px;
      }
      .author {
        border: 1px solid gray;
        border-radius: 25px;
        padding: 10px;
      }
    }
    textarea {
      font-size: 18px;
      width: 700px;
      line-height: 135%;
      padding: 8px 16px;
      resize: none;
      border: 1px solid white;
      overflow: hidden;
    }
    textarea:focus {
      outline: none;
      border: 1px solid gray;
      overflow: auto; // only have scroll bar when focused
    }
    .menu {
      width: 750px;
      span {
        float: right;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
  @for $i from 0 through 10 {
    .level-#{$i} {
      position: relative;
      left: #{$i*65}px;
    }
  }
}

Here it works: http://jsfiddle.net/6qu5h7L2/. Can you post yours on JSFIDDLE, please? — loveNoHate, Sep 05 '15 at 03:20
Hi Adam, it's hard to tell why without seeing the style rules applied to each element. Your CSS-Tricks reference is right. Something in the styles may be overriding the default behavior. Post the code if possible. — Michael Benjamin, Sep 05 '15 at 04:40
I updated the question with my full code. As for JSFiddle, I'm not really sure what I could extract out without losing important information. — Adam Zerner, Sep 05 '15 at 14:20

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

You probably should try a clearfix method.

Look here: What methods of ‘clearfix’ can I use?

edited May 23 '17 at 12:22

Community

1
1

answered Sep 05 '15 at 03:16

PeterPan

684
1
10
27

Not on `inline-block`. :-/ – loveNoHate Sep 05 '15 at 03:18
Why not on `inline-block`? – PeterPan Sep 05 '15 at 03:19
Look there, maybe that helps: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – PeterPan Sep 05 '15 at 03:20

score 0 · Answer 2 · answered Sep 05 '15 at 03:20

0

Use an inline block.

span.left-icons{
  display: inline-block;
}

answered Sep 05 '15 at 03:20

amespower

907
1
11
25

Why is the height of my inline-block element smaller than the image inside of it?

2 Answers2