html - 在表格中的 元素下方添加垂直空间

Question

我有一些固定宽度的内容，我想放在表格标题单元格中周围有一个小气泡，以区别于非固定宽度的文本。

下面的示例看起来不错，只是气泡底部覆盖了单元格边框。

我想通过将文本向上移动 1 来修复，似乎无法弄清楚；实际上，我认为我想要 code.literal 的基线文本比正常值高 1-2px <th>基线。

有办法吗？

code.literal {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: normal;
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
}

th, td {
    font-family: Arial, sans-serif;
}
.small {
    font-size: 75%;
}

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
  padding-bottom: 0;
  padding-top: 0;
}

<table>
<tr><th>Aluminum <code class="literal small">foo.bar.baz.quux</code></th>
    <th>Barium <code class="literal small">jabberwocky</code></th>
</tr>
<tr><td>1</td><td>2</td></tr>
</table>

Answer 1

如果您将 display: inline-block; 添加到您的 code.literal，该表将包含该元素作为 block 级项。我认为这就是您在这里的目的。

code.literal {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: normal;
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
    display: inline-block;
}

th, td {
    font-family: Arial, sans-serif;
}
.small {
    font-size: 75%;
}

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
  padding-bottom: 0;
  padding-top: 0;
}

<table>
<tr><th>Aluminum <code class="literal small">foo.bar.baz.quux</code></th>
    <th>Barium <code class="literal small">jabberwocky</code></th>
</tr>
<tr><td>1</td><td>2</td></tr>
</table>