html - 如何从带有显示表格单元格的 div 中删除边距顶部？

Question

我必须使用 display: table-cell:

<div>
    This is table cell
</div>
<div>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
</div>

CSS

div {
    display: table-cell;
    background-color: blue;
    padding: 0 20px;
}

div:nth-child(1) {
    background-color: red;
    padding: 0 20px;
}

http://jsfiddle.net/aa61mLbn/

但是第一个 div 的内容有某种由显示表。我检查了元素，没有计算任何边距，但正如你可以在jsfiddle中看到，内容和顶部之间有一些空间的分区。我想知道如何删除该空格。

提前致谢!

Answer 1

只需在您的 div 中添加一个值为“top”的 vertical-align 属性

div {
    display: table-cell;
    background-color: #7cbaf4;
    padding: 0 20px;
    vertical-align:top;
}

div {
    display: table-cell;
    background-color: #7cbaf4;
    padding: 0 20px;
    vertical-align:top;
}

div:nth-child(1) {
    background-color: #FF6347;
}

<div>
    This is table cell
</div>
<div>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
    <h1>Some content</h1>
</div>