2

HTML5 と CSS3 のみを使用して、テキストが存在する場合にのみ要素内のテキストにパディングまたは少なくともパディングのように見えるものを追加する方法はありますか?

以下にサンプルコードとデモを示します。

CSS:

.container {
    background-color:red;
}

.text {
    text-align:center;  
    font-size:18px;
    padding:10px;
}

HTML:

<div class='container'>
    <p class='text'>text</p>
</div>

0pxテキストがない場合、コンテナが高い限り、構造は変更できます。

デモ

4

1 に答える 1

6 
.text {
    text-align: center;  
    font-size: 18px;
    padding: 10px;
}
.text:empty {
    padding: 0px;
}

これは IE<8 では機能しないことに注意してください。必要な場合は、JavaScript ( など) またはSelectivizrif (text.children.length === 0) text.style.padding = '0px'などの JavaScript フォールバック ライブラリを使用できます。

ここに JSFiddleがあります。

これは、疑似クラスの MDN リファレンス ページです。:empty

于 2013-11-07T00:05:28.160 に答える