Заголовок 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.