html - テキストの背景色をテキストに正確に合わせ、「パディング」を削除します

Question

このテキストの周りに黒の背景を作成できるようにする必要があります。現在、パディングは 0 ですが、何とかクリップできるようにする必要がありますか? つまり、これが現在のテキストです。

そして、私はそれが次のようになる必要があります:

上下に透明な背景を持つことができる限り、これがどのように達成されるかは気にしません。

現在のCSSは次のとおりです。

padding:0em 0.2em 0em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;

ありがとう！

Answer 1

line-height1.0em 未満のプロパティを追加します。たとえば、次のようになります。

line-height: 0.75em;

これはインライン要素では機能しないことに注意してください。そのため、 がまたはdisplayに設定されていることを確認してください。blockinline-block

使用するフォントによっては、padding-topおよび/またはを使用して垂直位置を微調整する必要がある場合もあります。padding-bottom

Answer 2

font-size よりも低い line-height が必要です。

padding:0em 0.2em 0em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;
font-size: 21px;
line-height: 15px;

ディスプレイがブロックまたはインラインブロックであることを確認してください。

ミスタースレイヤーは私を打ち負かしました！

Answer 3

JSビンはこちら

以下のようにCSSを作成してください

padding:0.2em 0.2em 0.2em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;
font-size:25px;  
line-height:8px

Answer 4

これはどう

フィドル

<div>Some text</div>

CSS

div
{
    position: relative;
    display: inline-block;
    color:#fff;
}
div:before
{
    content: '';
    display: inline-block;
    margin: auto;
    background: #000;
    width: 100%;
    height: 68%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;       
}