【CSS】width・height が効かない時は「インライン要素になっていないか?」を疑おう!
  • 高さを指定するために使うheightプロパティ
  • 横幅を指定するために使うwidthプロパティ

しかし、下記のように指定しても全くデザインに反映されない時がある。

「ん?なんで??」

という時はすっかり忘れているチェックポイントがあるので備忘録として整理しておこうと思う。

スポンサーリンク

display:inline だと幅・高さの指定はできない

幅とか高さを変えたい要素が、

display:inline

つまり、インライン要素だとwidthやheightが効かないのだ!

これをよく忘れてしまって焦ることが私は多い。

つまり、display:inline ならば幅や高さを指定できないのだ。

display:inline が初期値(つまりデフォルトね)のaタグとかspanタグとかは、そのままwidthやheightを指定しても大きさを変えることが出来ない。

変えたいなら、ブロック要素にする必要があるので

display:block;を指定する必要があるのだ!

CSSが反映しない時はこのチェックポイントを思い出したいと思う。

関連記事はこちら!

CSSが反映されない時のための初心者用チェックリスト(初心者編)

おすすめの記事