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代码进行更改。

表格单元格的CSS标题

2 个答案: