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

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

デモのキャプチャ

Fix Padded Image Links with Negative Margins
demo

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

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

角丸のスタイルシート

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

jQueryを使用したスタディ

CSSを使用したスタディ

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

解決方法

sponsors

top of page

©2018 coliss