学んだこと、日常

blog

理解したいcss② ブロック要素、インライン要素、インラインブロック要素

インライン要素、ブロック要素に関しても認識が甘いと感じたので、まとめていきたいと思います。

ブロック要素

ブロック要素とは<h1>タグや<div>タグ、<p>タグなど、その要素自体で改行を伴うような、ブロックになったものをいう。width,heightも指定できるし、margin、paddingも指定が自由にできる。

インライン要素

インライン要素には<span>タグや、<a>タグ、<img>タグなどがあり、それ単体では改行を伴わず、横並びに表示されるものをいう。width、heightは指定することが出来ず中身の要素に大きさによって決まる。 marginも左右のみの指定となる。paddingは指定可能であるが、上の要素とかぶってしまう可能性もある。

<span>タグ にpaddingを上に付けたために上の行とかぶってしまった例

インラインブロック要素

インラインブロック要素とは、ブロック要素の特性とインライン要素の特性を併せ持ったものをいう。要素にcssでdisplay:inline-blockを指定することで、インラインブロック要素にすることが出来る。width、heightの初期値は中身の内容に沿うが(なので改行を伴わない)、指定も可能。margin,paddingも自由に指定可能となる。         

今までふわっとした理解だったので、これを機にしっかりと覚えておきたいと思います。

contact