CSS ブロックレベル要素とインライン要素

※html5の公式な分類としては廃止されましたが、挙動は今も現役で使用できます。

ブロックレベル要素

横幅は基本100%になります。(親要素いっぱいまで伸びる)
前後に改行が入ります。
→ブロックレベル要素を続けて記述した場合、画面上は縦(新しい行)になります。
width、height、margin、paddingが効きます。

ブロックレベル要素の縦に並ぶサンプルです。

<p>TEST1</p>
<p>TEST2</p>
<p>TEST3</p>

画面でみた場合以下になります。

主なブロックレベル要素

article	footer	ol
aside	form	p
blockquote	h1からh6	pre
body	header	section
dd	hr	select
details	html	summary
dialog	li	sup
div	main	table
dl	menu	ul
dt	nav

インライン要素

文字と同じ流れで横に並びます。
改行されません。
widthとheightで幅と高さを指定できません。(img,inputは可能)
marginは、左右のみ効きます。(img,inputは上下も可能)

インライン要素の横に並ぶサンプルです。

<p>
  <span>aaa</span>
  <span>bbb</span>
  <span>ccc</span>
</p>

画面でみた場合以下になります。

主なインライン要素

a	em	strong
audio	iframe	sub
br	img	textarea
button	input	time
canvas	label	video
code	object
embed	span

ブロックレベル要素とインライン要素の比較まとめ表

特徴	ブロックレベル要素	インライン要素
改行	前後に改行が入る	改行されず横に並ぶ
幅のデフォルト	親要素の100%	コンテンツ分だけ
幅・高さの指定	可能	不可能
上下の余白	適用される	適用されない(崩れる)
主な用途	構造、レイアウトの箱	文中の装飾等

インライン要素＋ブロックレベル要素

display:inline-block

display:inline-blockと指定するとインライン要素と同じように画面上は横に並びかつ
widthとheightで幅と高さを指定できます。
marginも上下左右効きます。
便利なのでよく使われるテクニックです。

インライン要素＋ブロックレベル要素のサンプルです。

<style>
  .box1 div {
    display: inline-block;
    width: 100px;
    height: 50px;
    margin: 10px 10px 10px 10px;
    background-color: #f5deb3;
  }
</style>
<div class="box1">
  <div>abc</div>
  <div>abc</div>
  <div>abc</div>
</div>

3行目はdisplayにinline-blockを指定しています。
11～13行目は、ブロックレベル要素のdivタグが続いていますが
inline-blockの指定があるので横に並びます。
4～6行目のwidthとheightとmarginは反映されます。

以下は実行結果のイメージです。