H1 将 DIV 内容向下推送问题

Question

所以首先，我知道在这种情况下我可以对H1进行快速position:absolute并解决我的问题。我正在寻找的是解释为什么会发生以下情况，以及另一种不涉及position:absolute的更流畅的解决方法

剥离了行为的简单示例：JsFiddle

内部div 中的 H1 似乎填充了整个单元格并按下右侧的按钮。如果我脱下<h1>，只使用<strong>或其他东西，那就没问题了。您将看到我的边距和填充设置为 0

我很感激在我敲掉 css 上的灰尘时学习一个新技巧。谢谢！

Answer 1

通过这种方式它的工作原理： https://jsfiddle.net/Marco_Bernardini/6aorkzso/6/

<div class="a-grid">
    <div class="a-grid-row">
        <div class="a-grid-cell">
            <h1 id="zot">Blah Blah Blah</h1>
        </div>
        <div class="a-grid-cell">
            <div class="a-grid-container">
                <div class="a-grid-row">
                    <button>1</button>
                </div>
                <div class="a-grid-row">
                    <button>2</button>
                </div>
                <div class="a-grid-row">
                    <button>3</button>
                </div>
            </div>
        </div>
    </div>
</div>

.CSS：

.a-grid-container {
    display: table;
    border-collapse: collapse;
}
.a-grid-row {
    display: table-row;
}
.a-grid-cell {
    display: table-cell;
    vertical-align:top;
    border: #f00 1px solid;
    padding: 0;
}
#zot {
    background-color: #cf0;
    margin:0;
    padding: 0;
}

我添加了一个background-color，以查看h1的边界，以及一个vertical-align: top。

Answer 2

您正在使用表格布局。h1元素单元格和按钮单元格位于同一行上，因此它们一个接一个地显示在同一行上。但我没有意识到是垂直对齐困扰着你。

如果您想提高技能，请查看弹性框布局。