inline要素のpaddingを使う場合の注意点 | IT工房

display:inlineに設定された要素にpaddingをつけた場合の注意点です。padding-leftの指定を行っても、行の終端でインライン要素が折り返された場合には、次の行の先頭にはpadding-leftが付きません。
これは仕様書では次のように記述されています。

インラインボックスが分割される場合、マージン、ボーダー、パディングは、分割が発生する場所で視覚効果を持たない

例えばリスト要素からリストマークを取り去りその代わりにbackground-imageでリストマークの画像を表示させてみます。
通常以下のようなコード　になります。

HTMLコード

<ul>
  <li>あああああああああああああああ</li>
  <li>いいいいい</li>
  <li>ううううう</li>
</ul>

CSSコード

ul{
  width:200px;
  margin:50px;
  list-style: none;
}
li{
  background:url(icon_001.gif) no-repeat left center;
  padding-left: 15px;
}

結果は以下のようになります。

次に、リストの中のaタグにpadding-leftを設置した例です。これがdisplay:inlineに設定された要素にpaddingをつけた例になります。
HTMLコード

<ul>
  <li><a href="#">あああああああああああああああ</a></li>
  <li><a href="#">いいいいい</a></li>
  <li><a href="#">ううううう</a></li>
</ul>

CSSコード

ul{
  width:200px;
  margin:50px;
  list-style: none;
}
li a{
  background:url(icon_001.gif) no-repeat left center;
  padding-left: 15px;
}

結果は以下のようにテキストが行の終端で折り返された場合には次の行の先頭にpadding-leftは付きません。