Photo by: Maurice Svay
display:inline;のスタイルを当てた場合、CSSの仕様上、上下の「margin」「padding」が当てられなくなります。
しかし、どうしても「display:inline;」のスタイルに当てたい場合があると思います。そんな時は、少々強引ですが、以下のCSSを試して見てください。
「display:inline」のスタイルのついた「moji」というクラスに「padding」を当てる場合の例です。上に25px、下に25pxの「padding」を当てています。
<div class="moji"> 我が名はネオエクスデス。FF5のラスボスである。 オメガより全然弱いけどなんか文句あるか！？ さぁかかってこい！俺は神龍よりも弱いけどな！ </div>
.moji {
display: inline;
}
.moji:before {
display: inline-block;
content: "【";
padding: 25px 0px 0px 0px;
}
.moji:after {
display: inline-block;
content: "】";
padding: 0px 0px 25px 0px;
}
「:before」「:after」で「content」を指定しなくてはいけないという縛りはあるのですが、こうすれば当てることができます。
「:before」「:after」に「display:inline-block」を当てるのがミソです。これ以外だと無効化されてしまうので注意です。
本当は「content」にスペースを入れたいですが、半角であれ、全角であれ、スペースを入れると無効化されてしまいます。
ようできてるわ・・・。
ちなみに、「span」などの元々のインライン要素でもいけます。