CSS：如何将div缩小到超出字体的隐形填充？

Question

代码：http://jsfiddle.net/xVCrn/1/ （在chrome / webkit中效果最佳）

我正试图让红色部分在黑暗区域内有1px的边距。但我似乎无法改变红色部分的高度。 =（

目标：

Answer 1

将display: inline-block;添加到红色部分可让您控制其高度。

这是一个示例（添加了一些填充以使其看起来不错）：http://jsfiddle.net/xVCrn/

Answer 2

如果使用display-inline，您可以设置它的高度。您还需要设置line-height。例如，我添加了line-height:17px;，它的中心非常好。

示例：jsFiddle Example

提示：对于border为1px且border-radius的元素的webkit浏览器。使用1px double #color它有助于锯齿状线条。我认为这主要是Chrome中一个尚未解决的问题。