ブロックボックスとインラインボックス

違い① 改行されるかどうか

divとspanの2つのタグに同じaのクラス名を付けました。同じスタイルを付けます。 .a{
background-color:violet;
}

background-color:violet;のつき方が違います。
コピーして3行にしてみます。

ブロックボックスの方はボックス内で改行しますが, インラインボックスの方は3つにわかれました。

違い② width, height の挙動

両方のボックスにwidthとheightをつけます。
.b{
background-color:violet;
width:100px;
height:100px;
}

background-color:violet;のつき方と改行が違います。

違い③ padding, margin, border の挙動

ブロックボックスとインラインボックスの要素の例
HTML
<div class="c">ブロック内の<span class="d">インライン</span>です。
インラインの場合はmargin,padding,border が 来た時に他の要素のことを考えません。</div>
CSS
.c{background-color:pink;padding: 20px;}
.c .d{margin: 20px;border:1px solid black;
background-color:lightgreen;padding: 20px;}

span自体はスタイルができていますが,ブロックのことはかまいません。

ブロックボックスとブロックボックスの要素の例
spanをdivに変えます。
HTML
<div class="c">ブロック内の<span class="d">インライン</span>です。
インラインの場合はmargin,padding,border が 来た時に他の要素のことを考えません。</div>
CSS
.c{background-color:pink;padding: 20px;}
.c .d{margin: 20px;border:1px solid black;
background-color:lightgreen;padding: 20px;}

divはブロックを弾きます。