2022-08-11

span要素にwidth（横幅）を指定する方法

span 要素は「インライン要素」なので、 本来は 「width」プロパティで横幅を指定することはできません。 ですが「display:inline-block;」 を指定することでインラインレベルのブロック要素となり、 width（横幅）や height（高さ）を指定することができます。

width、height を指定するサンプルコード

次のように「display:inline-block;」を指定することで、 width や height プロパティを指定できるようになります。

span {
	display: inline-block;
	width: 100px;
	height: 20px;
}

「display:inline-block;」とは？

「display」プロパティは、要素の表示形式を指定するプロパティです。
値として「inline-block」を指定することで、 指定された要素をインラインレベルのブロック要素にします。

該当要素はブロックレベルの要素になりますが、 表示上はインライン要素のように表示されます。