Question

我必须使用display：table-cell：

进行div

<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中看到，内容和顶部之间有一些空间的div。我想知道如何移除那个空间。

提前致谢！

Answer 1

只需在div中添加一个vertical-align属性，其值为＆＃34; top＆＃34;

line[line.index(' '):]

＆＃13;

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

＆＃13;

div {
    display: table-cell;
    background-color: #7cbaf4;
    padding: 0 20px;
    vertical-align:top;
}

div:nth-child(1) {
    background-color: #FF6347;
}

＆＃13;

Answer 2

尝试：

div {
    display: inline-block;  // same effect , but better
    background-color: blue;
    padding: 0 20px;
}

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

Answer 3

只需将vertical-align:top;添加到div：

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

这将强制文本上升。小提琴：http://jsfiddle.net/aa61mLbn/2/

如何使用display table-cell从div中删除margin top？

3 个答案: