はじめに
HTML・CSSを書いていて、うまくCSSのプロパティがあたらないことがよくありました。そんなときの主な原因はプロパティをあてたいタグのdispalyプロパティの初期値を把握していなかったことでした。今回は主なHTMLタグのdispalyプロパティの初期値とそれらの特徴ゆえに自分がよくひっかかっていたところをまとめてみようと思います。
デフォルト値
以下が主なHTMLタグのdisplay初期値となります。
| block | inline block | inline |
|---|---|---|
| div | input | span |
| h1 ~ h6 | textarea | img |
| p | button | a |
| form | select | |
| header | ||
| footer | ||
| section |
よくひっかかっていた特徴
僕がよくひっかかっていたそれぞれの特徴です。
| block | inline block | inline | |
|---|---|---|---|
| heightやwidthの指定 | できる | できる | できない |
| vertical-alignの指定 | できない | できる | できる |
| text-alignの指定 | できない | できる | できる |
おわり
画像の高さが指定できなくてよくひっかかっていました。imgタグの初期値はdisplay: inlineなので当然ですね。書いてて思いましたが、僕がよく使うHTMLタグって結構少ないんだなと。もっとセマンティックに書けるようになりたいものです。
記事を書くにあたっては過去の経験を元にしており、一部のみ手元で確認した程度ですので誤りなどございましたらお気軽にご指摘ください。