Fix Padded Image Links with Negative Margins

This is a pretty basic trick that will be obvious to many of you. But for whatever reason, the solution to it always kind of eluded me so I’m sharing it here. I like padded links. Where you give links in body content a little padding, background, and rounded corners.

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

The problem is that when you make images into links, this padding shows up in ungainly ways.

Falsche Lösungswege

Wie ich es früher gelöst habe, war wie mit einem Vorschlaghammer statt mit einem Meißel. Das heißt, ich habe etwas jQuery geschrieben, um den Padding für diese Bilder zu entfernen.

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

Das habe ich getan, weil jQuery die `.has()` Funktion hat, die sehen kann, ob ein Element ein anderes Element enthält, was CSS fehlt. Es wäre cool, wenn wir das in CSS machen könnten…

a:contains img { padding: 0; }

…aber das können wir nicht. Eine andere Möglichkeit wäre, allen Links, die Bilder enthalten, eine Klasse hinzuzufügen, wieclass="imageLink". Ich habe kein besonderes Problem mit der Semantik dessen, aber es ist nicht so zukunftssicher, wie ich es mir wünschen würde. Vielleicht verwendet ein zukünftiges Design der Website keine gepolsterten Links mehr und nun haben all diese alten Links einen unnötigen Klassennamen.

Der einfache Weg

Wie sich herausstellt, ist der einfache Weg, dies zu handhaben, dem Bild im Inneren einige negative horizontale Ränder zu geben.

a img { margin: 0 -6px; }

Das zieht den zusätzlichen Polster von außen weg und lässt ein sauberes, nubby-freies Bild zurück.

Demo ansehen

Beachten Sie, dass ich im Demo eine Klasse verwendet habe, um das Problem zu beheben, genau das, was ich Ihnen oben gesagt habe, nicht zu tun. Das war nur zu Demozwecken, da ich ein Problembild und ein behobenes Bild auf derselben Seite haben wollte.