[CSS]リンクの装飾をテキストと画像で調整するスタイルシートのチップス
Post on:2009年11月18日
sponsors
テキストリンクに設定したスタイルを画像リンクで不具合がでないようにするスタイルシートのチップスをCSS-Trickから紹介します。
Fix Padded Image Links with Negative Margins
demo
テキストリンクには角丸の矩形のスタイルを適用した際、そのままだと画像リンクにも同様のスタイルが適用されてしまい、意図しないものになってしまいます。
これを画像だけそのスタイルが適用されないように設定します。
リンクには、下記のスタイルシートを設定し、角丸のスタイルを適用しています。
角丸のスタイルシート
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> a { padding: 2px 6px; background: #eee; -moz-border-radius: 4px; -webkit-border-radius: 4px; } </textarea> |
スタディとして、img要素のpaddingを「0」にすると、これはうまくいきません。
jQueryを使用したスタディ
|
1 2 3 |
<textarea name="code" class="js" cols="60" rows="5"> $("a:has('img')").css(padding, 0); </textarea> |
CSSを使用したスタディ
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> a:contains img { padding: 0; } </textarea> |
これは、角丸で指定した「padding: 2px 6px;」を基準にし、下記のようにするとうまくいきます。
解決方法
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> a img { margin: 0 -6px; } </textarea> |
sponsors
