まめージェント

Android, GAE, AngularJSの技術ネタ中心。Twitter: @mame01112

CSSのP要素、div要素、span要素の違い

フロントエンドをHTML + CSSで書いていて何となく分かった気になっていたけど、でも詳しい違いを理解していなかった、p, div, spanの違いに関して勉強してみたのでメモ。

簡単に書くと、これらの違いは下記の通り。

p:ブロック要素。段落を指定する時に使う。
div:ブロック要素。前後に改行が入る。
span:インライン要素。前後に改行が入らない。

なるほどです。これでスッキリ。

なので、p要素を指定しつつ、

p {
 display: inline;
 margin-top 10px;
}

とかやって、無理矢理インライン要素にして使うのは間違った使い方のようです。

ちなみにインライン要素とブロック要素の違いは、
・インライン要素: その要素の右側に別の要素が回り込む
・ブロック要素: その要素の右側に別の要素が回り込まない(下に表示される)

という違いがあります。