どうも、7noteです。インライン要素に指定しても効かないcssの話。

cssってたくさんありすぎて、どれがどう反映されるのか覚えるだけでも大変なのに、
要素によっては効かないものまであるという初心者にはかなり厄介なものかなと思います。

今回はそんなcss初心者の人向けに「インライン要素には効かないcss」をまとめて紹介していきます。

インライン要素に指定しても効かないcss一覧

・ margin（の上下）

span {
    margin: 100px 0; /* ← 効きません */
}

インライン要素にはmarginの上下を指定することはできません！
親要素のブロック要素に指定するか、「display: inline-block;」「display: block;」を当ててインライン要素ではなくしてからなら効きますよ。

・ margin（auto）

span {
    margin: 0 auto; /* ← 効きません */
}

インライン要素にはmarginのautoは効きません。左右に余白をとる場合は実数値のpxなどを使うようにしましょう。

・ text-align

span {
    text-align: center; /* ← 効きません */
}

これは経験者の人でもやってしまうことあるのではないでしょうか。私はいまだにたまに間違えます。
「text-align: center;」はブロック要素に指定するものなので、「ブロック要素の中にあるコンテンツを中央揃えにしなさい」というcssなので、効きません。ちなみにinline-blickの要素にも「text-align: center;」は効きません。

・ width,height（imgタグを除く）

span {
    width: 100%; /* ← 効きません */
    height: 200px; /* ← これも効きません */
}

インライン要素に横幅と高さは指定できません。ただし例外があり、imgタグには横幅と高さを指定することができます。

主要なcssでインライン要素に効かないcssは以上です。
他にも厳密にはbox-sizing: border-box;とかも横幅が効かないので同様に効かないのですが、そういうものは省きました。

【追記】
「img要素, input要素, object要素, select要素, textarea要素, button要素」
これらの要素には横幅と高さが指定できます。「置換要素」と呼びます。それ以外の要素は「非置換要素」と呼びます。

まとめ

いろいろ調べたのですが、インライン要素には何が効かないのかを全部まとめてるサイトは少なかったので今回記事にしました！
このへんの話は初心者はけっこう詰まりやすいし、なかなかミスに気づかないことも多くて余計な時間をくうことになるので覚えておいて損はないです！しっかり覚えておきましょう！

おそまつ！