Question

.left-icons为inline-block且height为21px：

请注意，其中图片的height为38px：

CSS技巧says：

如果未明确指定包含块的高度，则元素没有绝对定位，它的高度值计算到auto（它将与其中的内容一样高，或者如果没有内容，则为零。

未明确指定包含块的高度。那么为什么我的外部元素比它内部的图像小呢？

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;
    }
  }
}

Answer 1

您可能应该尝试使用clearfix方法。

请看这里：What methods of ‘clearfix’ can I use?

Answer 2

使用内联块。

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

为什么我的内联块元素的高度小于其内部的图像？

2 个答案: