インライン要素にサイズ指定をする【CSS】

インライン要素にサイズやマージンの指定ができるのか迷うことがあったので覚え書きです。

span要素で確認していきます。

それではよろしくお願いします。

インライン要素にwidth、heightのサイズ指定はできない

このspan要素にwidth, heightを設定してみます。

.span11 {
    width: 100px;
    height: 100px;
}

pppspanppp

span要素はサイズ変更できませんでした。widthとheightは効果無しです。あら残念。

インライン要素をブロック要素に変更すればサイズを指定できる

span要素をブロック要素に変更するとサイズ指定が可能になります。

ここではインラインブロック要素に変更してテストしています。

.span3 {
    display: inline-block;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}

pppspanppp

span要素にサイズ指定が可能になりましたね。

補足ですが、文字を中央に表示したいので、text-alignとline-heightを設定しています。

span要素にmarginって効きましたっけ？

たまに忘れてしまいます。では試してみましょう。

このspan要素にpaddingとmarginを設定してみます。

.span4 {
    padding: 10px;
    margin: 10px;
}

pppspanppp

paddingは上下左右で有効です。marginは左右のみ有効であることが確認できます。

span要素にpaddingは有効

span要素にmarginは左右方向のみ有効

imgタグはサイズ指定できる

imgタグはインライン要素なんですけどサイズ指定できるんですね。

imgは置換要素です。 displayの値が既定でinlineですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像にはborder, padding, margin,width,height, などのプロパティを設定することができます。

.img23 {
    width: 50px;
}

この画像は100pxの画像ですが、50pxで表示しています。

まとめ

以下はインラインに設定できるデザインよりのプロパティです

• background-color
• color
• border
• padding
• margin : 左右のみ
• font-size
• line-height
• vertical-align
• outline

設定できないプロパティ

• width
• height
• margin : 上下
• transform: sale()

span ⇒ span

まとめ

インライン要素には、width、height によるサイズの設定はできません。

marginは左右のみ設定できます。上下は無効です。

paddingは設定できます。

メモ

span要素は、記述コンテンツ（phrasing content）、フローコンテンツ（Flow content）です。

参考資料

span -mdn-

inline elements -mdn-

block level elements -mdn-

置換要素 -mdn-

関連記事

spanタグとspanタグの間に隙間ができる問題