CSS

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」などの元々のインライン要素でもいけます。