2013-06-21 47 views
7

借此web example考虑(它似乎有同样的问题)我有my website下面的CSS(注意#head#body<div>'s之间的空间):如何删除div表格中的垂直填充?

#body { 
     display: table; 
     border-spacing: 0; 
     border-collapse: collapse; 
} 

#body-row { 
     display: table-row; 
     margin: 0; 
     padding: 0; 
} 

.column-left, .column, .column-right { 
     display: table-cell; 
     padding: 0px; 
     border: dotted 2px #89E; 
} 

.column-left, .column-right { 
     width: 190px; 
     font-size: .95em; 
} 

然而,这仍然增加之间的空间表格单元格的顶部和底部。填充和保证金似乎没有为此做任何事情。建议吗?

回答

21
.column-left, .column, .column-right { 
    vertical-align: top; /* add vertical align top to fix this issue */ 
    display: table-cell; 
    padding: 0px; 
    border: dotted 2px #89E; 
} 
+0

杜 - 当然!如果需要的话,我早就想知道了,但它从来没有表现出来(直到现在)。谢谢!这就是答案。 – Jonathan

+0

@ J-Law很高兴帮助! – koningdavid

+8

那么,对齐顶部将填充移动到底部而不是将其移除。 – Javarome