CSS表頭單元格

Question

我有一個小問題，有一個小高度出現的標題，我不知道如何去除它。

HTML：

<div class="wrapper_header"> 

<div class="left_header">&nbsp;</div> 
<div class="central_header fondo_amarillo"> 
    <div class="aleron_izquierdo"></div> 
    <div class="menu_option"><a href="#">Option 1</a></div> 
    <div class="menu_option"><a href="#">Option 2</a></div> 
    <div class="menu_option"><a href="#">Option 3</a></div> 
    <div class="menu_option"><a href="#">Option 4</a></div> 
    <div class="menu_option"><a href="#">Option 5</a></div> 
</div> 
<div class="right_header fondo_amarillo">&nbsp;</div> 

CSS：

.wrapper_header { 
    width:100%; 
    display:table; 
} 
.central_header { 
    width:500px; 
    display:table-cell; 
} 
.left_header { 
    display:table-cell; 
} 
.right_header { display:table-cell; } 
.left_header { 
    background-image:url(http://www.alarconrotulos.es/img/amarillo_cabecera_izq.png); 
    background-repeat:repeat-x; 
} 
.aleron_izquierdo { 
    width:130px; 
    height:69px; 
    background-image:url(http://www.alarconrotulos.es/img/pestana_cabecera_peque_960.png); 
    position:relative; 
    left:-130px; 
    float:left; 
} 
.menu_option a { 
    font-size:18px; 
    height:69px; 
    vertical-align:bottom; 
    color:rgb(150,150,150); 
    float:right; 
    padding:0 5px; 
    display: block; 
    display: -webkit-box; 
    -webkit-box-align: end; 
    -webkit-box-pack: center; 
    display: -moz-box; 
    -moz-box-align: end; 
    -moz-box-pack: center; 
    display: box; 
    box-align: end; 
    box-pack: center; 
} 
.menu_option a:hover { 
    color:rgb(84,84,84); 
} 
.fondo_amarillo { 
    background-color:#FFFF58; 
} 

在這裏，你運行上面的代碼：http://jsfiddle.net/aL447/

當您運行的代碼，你將看到central_header塊有三個像素高於它應該是，我不能低估爲什麼。

任何想法？

謝謝。

Answer 1

默認情況下，單元格（或以CSS中的單元顯示的元素）與基線垂直對齊。
您希望vertical-align: top在這種情況下，這裏有一個working fiddle

基線是有道理的，當你對齊的輸入和一個標籤或文本和圖像，且各自爲不同的高度。但對於佈局來說，它更可能是頂部或底部值，也許是中間值。一定要測試一個項目佔據2行，迫使它與
（最壞的情況）

Answer 2

嘗試使用此代碼reset

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

.wrapper_header { 
    width:100%; 
    display:table; 
} 
.central_header { 
    width:500px; 
    display:table-cell; 
} 
.left_header { 
    display:table-cell; 
} 
.right_header { display:table-cell; } 
.left_header { 
    background-image:url(http://www.alarconrotulos.es/img/amarillo_cabecera_izq.png); 
    background-repeat:repeat-x; 
} 
.aleron_izquierdo { 
    width:130px; 
    height:69px; 
    background-image:url(http://www.alarconrotulos.es/img/pestana_cabecera_peque_960.png); 
    position:relative; 
    left:-130px; 
    float:left; 
} 
.menu_option a { 
    font-size:18px; 
    height:69px; 
    vertical-align:bottom; 
    color:rgb(150,150,150); 
    float:right; 
    padding:0 5px; 
    display: block; 
    display: -webkit-box; 
    -webkit-box-align: end; 
    -webkit-box-pack: center; 
    display: -moz-box; 
    -moz-box-align: end; 
    -moz-box-pack: center; 
    display: box; 
    box-align: end; 
    box-pack: center; 
} 
.menu_option a:hover { 
    color:rgb(84,84,84); 
} 
.fondo_amarillo { 
    background-color:#FFFF58; 
} 

我已經把這裏的一切，你需要與你的CSS代碼來改變重置。