CSS: Как мне уменьшить div до невидимого отступа шрифта?

Question

код: http://jsfiddle.net/xVCrn/1/ (лучше всего работает в chrome / webkit)

Я пытаюсь заставить красную часть иметь 1px поля внутри темной пуговичной области. но я не могу изменить высоту красной части. = (

цель:

Answer 1

Если вы используете display-inline, вы можете установить его высоту.Вы также захотите установить line-height.Например, я добавил line-height:17px;, и он довольно хорошо отцентрирован.

Пример: jsFiddle Пример

Совет: Для браузеров веб-наборов на элементах с border 1pxи border-radius.Используйте 1px double #color Это поможет с неровными линиями.Я считаю, что это в основном проблема в Chrome, которая не была решена.

Answer 2

Добавление display: inline-block; к красной части позволяет вам контролировать ее высоту.

Вот пример (с добавлением некоторого отступа, чтобы он выглядел хорошо): http://jsfiddle.net/xVCrn/