Question

为什么.ibg .im页边距设置会影响文字对齐？

我已尝试找到解决方案，但搜索字词的模糊性并未在Google中显示结果。

任何人都可以对此有所了解吗？任何帮助表示赞赏。

要查看我的问题，请从.ibg .im CSS规则中删除边距。

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

更新

所以看来这个问题触及了这个问题：CSS Margin Collapsing。但是，它没有解决删除兄弟填充/边距的方法。

假设我想让文字与绿色框的顶部对齐...如果没有position:relative;和top:-8px，是否无法执行此操作？这个解决方案似乎不必要地破解了对一个非常奇怪的CSS怪癖的反应

Answer 1

考虑您的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 -->

我在x元素的开头添加了字母li，以说明默认基线的位置，在这种情况下，它是字符x的底部。

在x之后，你有内联块.ibg，它包含一个嵌套在块级元素.im中的图像（但是这个块只是位于父内联块中，所以在这种情况下它不会影响基线）。默认情况下，图像的底部将在父元素（在本例中为li元素）确定的基线上对齐。

然后您拥有.lbl元素，它也是内联块，因此该文本框的底部也与li确定的基线对齐。

如果您要更改line-height或li的{{1}}，您会看到效果。

实际上，您可以更改每个内联元素的vertical-align值以获得交错效果，如演示中所示：

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

sample

关键点： 父元素设置封闭内联元素的基线级别（甚至是深嵌套的内联块）。

Answer 2

同时制作.ibg和.lbl vertical-align:middle

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

Answer 3

试试这个

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

影响父母的保证金＆gt;兄弟姐妹的物品？

3 个答案: