[CSS]リンクの装飾をテキストと画像で調整するスタイルシートのチップス

テキストリンクに設定したスタイルを画像リンクで不具合がでないようにするスタイルシートのチップスをCSS-Trickから紹介します。

テキストリンクには角丸の矩形のスタイルを適用した際、そのままだと画像リンクにも同様のスタイルが適用されてしまい、意図しないものになってしまいます。
これを画像だけそのスタイルが適用されないように設定します。

リンクには、下記のスタイルシートを設定し、角丸のスタイルを適用しています。

a {
  padding: 2px 6px;
  background: #eee;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

スタディとして、img要素のpaddingを「0」にすると、これはうまくいきません。

$("a:has('img')").css(padding, 0);

a:contains img { padding: 0; }

これは、角丸で指定した「padding: 2px 6px;」を基準にし、下記のようにするとうまくいきます。

a img { margin: 0 -6px; }

Post on:2009年11月18日