css - TD 内の PRE ブロックを「上」に垂直方向に揃えます

Question

TD 内の PRE ブロックのコンテンツを「上」に垂直方向に揃えようとしています。CSS スタイルシート ファイルを使用しています。運がない。ただし、フォントの色とサイズを変更することはできます。

table td pre{
color: red;
font: normal 16px Arial;
vertical-align:top; /* Does not work */
}

考えていただければ幸いです。

編集：

table td pre{
   color: red;
   font: normal 16px Arial;
}
table td {
   padding: 5px;
   border: solid 1px white;
   background-color: #edeff1;
   vertical-align: top;
}

Answer 1

垂直方向の配置は有効でtdあり、無効ですpre

table td.preBlock{
vertical-align:top;
}

table td pre{
color: red;
font: normal 16px Arial;
}

それからあなたはすることができます

<td class="preBlock">

フィドル

編集：

その方法でも私にとってはうまくいくようmargin-topです。こちらをご覧ください

フィドル2

Answer 2

pre 要素の上部の間隔も 0 にしてください。

td {
    padding-top: 0;
    margin-top: 0;
    vertical-align: top;
}
pre {
    padding-top: 0;
    margin-top: 0;
}

フィドルの例。