もみじろぐ

いろいろな雑記。最近は頭空っぽにしてとりあえず書いてます。

【CSS】ブロック要素、インライン要素、インラインブロック要素の違いまとめ

CSSでHTMLを装飾する際、 「その要素がブロックなのかインラインなのか」 を把握しないと、思い通りのレイアウトが実現できなかったりするので、この機会にまとめてみた。

ブロック要素とは

一般的なdiv、pタグ、その他リスト要素、tableなどもブロック要素。

特徴

  • 横いっぱいに幅がある。=親要素の100%分。 →なので見た目は改行されているように見える(見えるだけ!!!)
  • width, height, margin, paddingが指定可能。

インライン要素とは

インライン要素は文字通り、行の中にある(in line)要素。aタグやspanタグ、imgタグなど。

特徴

  • 行の中にあるので改行されない( =横並び )
  • width, height指定できない。(ただしimgタグは指定できる!!)
  • margin, padding は左右のみ指定可能。

よってwidth × marginのセンタリングなどは不可能。

特にaタグにCSSをつけようとする時、特徴の2番目が痛いです。なので、インライン要素は

.target {
    display: block;
}

でブロック要素にするか、インラインブロックにすべし。

インラインブロック要素とは

インラインブロック要素はつまり読んで字のごとく、ブロックとインラインどちらの要素も兼ね備えた最強装備!!

インラインのようにデフォで横並び、かつブロックのようにwidthやらなんやら指定できる。 例えば以下のような、ボタンのデザインなんかにはもってこいです。

f:id:momijitan:20180414223843p:plain

しかし、marginを全く指定していなくても微かな余白が生まれてしまう欠点あり。

これはhtmlタグの改行を半角スペースとして読み込んでしまっているため。 htmlを改行せずに書くなどいろいろ解決策あり。

inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH

→結論、めんどいからflexにしてよくね?

特徴

  • 改行されない(=横並び)
  • width, height, margin, paddingが指定可能。
  • 微かな余白

まとめ

  • ブロック→基本そのままで扱い易いけど、デフォで改行されてしまうので横並びにしたいときはflexbox。→(近日公開予定)

  • インライン→基本扱いにくい。デザインいじるならとりあえずブロック。

  • インラインブロック→ブロックとインラインの美味しいとこ取り…のはずだ ったのに謎の余白持ち。余白がウザかったらFlex!!

参考リンク

http://cra.jp/blog/skill/1506_display/ http://taneppa.net/display-inline-block/
インライン要素 - HTML | MDN