displayプロパティ

要素には生まれつきのならび方がある

HTML の要素は、なにも指定しなくても block と inline のどちらかの性格を持っています。block は h1 や p や div のなかまで、かならず改行して 1 行をまるごと使います。inline は a や span のなかまで、文章の流れのなかに文字と同じようにならびます。この性格を書きかえるのが display プロパティです。

inline に padding がうまく効かない

inline 要素は、自分のために行の高さを押し広げてくれません。上下に padding を足しても、まわりの行はよけてくれず、背景だけが上下の行に重なってはみ出します。左右の padding は効くのに上下だけ様子がちがう、というのが inline のいちばん引っかかるところです。リンクの押せる範囲を縦に広げたいときには困ります。

inline-block に切りかえる

そこで display: inline-block です。横のならび方は inline のまま文章の流れに乗りますが、中身の箱としては block としてふるまうので、上下の padding も width も height もきちんと効きます。ナビのリンクに指定して、指で押しやすい大きさにしましょう。

たとえば文章の途中に置く「受付中」のラベルは、横幅を決めつつ、まわりの文字と同じ行に置けます。block なら次の行へ移り、inline なら width は効きません。演習のリンクでは幅を固定せず、指定された padding で押せる範囲を広げます。

.status-label {
  display: inline-block;
  padding: 3px 10px;
  width: 80px;
}

1. style.css に .site-nav a のルールを追加する
2. display に inline-block を指定する
3. padding を上下 6px、左右 4px にする