Question

我用div制作一个名字网格，然后我开始制作一些固定宽度的方框。这是相关的HTML：

＆＃13;

    
    #names {
        background-color: rgb(191, 191, 191);
        width:80%;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid green;
    }
    .row {
        text-align: center;
        border: 1px solid red;
        background-color: rgba(255,0,0,0.2);
        height:80px;
        text-align: center;
    }
    .item{
        display: inline-block;
        text-align: center;
        background-color: rgba(0,0,255,0.2);
        width:50px;
        height: 100%;
        margin-left: 50px;
        margin-right: 50px;
        border: 1px solid blue;
    }

＆＃13;

  <div id="names">
        <div class="row">
            <div class="item">hi</div>
            <div class="item"></div>
        </div>
    </div>

＆＃13;

无论出于何种原因，当div中有文本或元素时，它们的位置低于它们内部没有任何内容的情况。此外，height属性在.item中越大，div越远。这可以通过否定margin-top来修复，但它可能会在将来导致问题，并且无论我是否想知道此行为的原因。

为什么会这样？为什么它只发生在div内的内容？为什么height属性与它有关？任何信息将不胜感激！

Answer 1

vertical-align的初始值为baseline。

来自http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height：

vertical-align：baseline - 将框的基线与父框的基线对齐。如果框没有基线，请将框的底部与父级的基线对齐。

将vertical-align: top;添加到.item可以解决您的问题。另外，请务必使用box-sizing: border-box;来防止项目的高度高于其父级。 http://codepen.io/anon/pen/eBNgWe

为什么增加div的高度会降低div？

1 个答案: