インライン要素とブロック要素について②

前回(インライン要素とブロック要素について①)はdisplayプロパティや値について軽く解説していきましたが、今回は本題であるインライン要素とブロック要素について解説をしていきます。

【インライン要素とは？】

主に文中の一部として使われており、テキストの装飾やリンクなどの要素に用いられる。

・要素の幅は中身と同じ大きさになる

・素の間には改行が入らず横に並ぶ

・幅（width）と高さ（height）が指定できない

・余白（padding・margin）が指定できない

※左右のpadding、marginは指定できる

　上下のmarginは指定できない

　上下のpaddingを指定すると前後の行とかぶる

・text-align(親要素に対して)やvertical-alignが指定できる

---記入例---

セレクタ {

   display: inline;

}

【ブロック要素とは？】

・要素の幅はブラウザ幅いっぱいになる

・要素同士が縦に並ぶ

・幅（width）と高さ（height）が指定できる

・余白も上下左右（padding・margin）に指定できる

・text-alignやvertical-alignの指定はできない

---記入例---

セレクタ {

   display: block;

}

と、上記以外にも

【インラインブロック要素】

というものがあり

インライン要素のように横並びに配置でき、ブロック要素のように幅や高さ・余白の指定ができます。 text-alignやvertical-alignの指定もすることができ、「幅や高さが変更できるインライン要素」とイメージするとわかりやすいとかと思います。