음의 여백으로 패딩된 이미지 링크 수정

반응형

이것은 여러분 대부분에게 명백할 꽤 기본적인 속임수입니다. 하지만 어떤 이유에서든, 그 해결책은 항상 저를 피해서 여기서 공유합니다. 나는 패딩 링크를 좋아한다. 본문 내용에서 링크를 약간의 패딩, 배경 및 둥근 모서리로 제공합니다.

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

문제는 이미지를 링크로 만들면 이 패딩이 보기 흉하게 보인다는 것이다.

잘못된 해결 방법

제가 그것을 고치는 방법은 끌 대신 큰 망치를 사용하는 것이었습니다. 즉, 이미지의 패딩을 제거하기 위해 jQuery를 작성했습니다.

 

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

jquery가 .has() 함수를 가지고 있기 때문에 CSS에는 없는 다른 요소가 포함되어 있는지 확인할 수 있습니다. 우리가 이것을 CSS에서 할 수 있다면 멋질지도 모른다.

a:contains img { padding: 0; }

…하지만 할 수 없습니다. 다른 방법은 class="imageLink"와 같은 이미지를 포함하는 모든 링크에 클래스를 추가하는 것입니다. 저는 그것의 의미에 특별한 문제는 없지만, 제가 원하는 만큼 미래 친화적이지는 않습니다. 아마도 이 사이트의 미래 디자인은 패딩된 링크를 사용하지 않을 것이고 이제 모든 오래된 링크는 불필요한 클래스 이름을 갖게 될 것이다.

쉬운 방법

 

알고 보니, 이것을 다루는 쉬운 방법은 내부에 있는 이미지에 약간의 음의 수평 여백을 적용하는 것입니다.

a img { margin: 0 -6px; }

그렇게 하면 여분의 패딩이 외부로부터 떨어져 나가고 깨끗한 누비 프리 이미지가 남는다.

데모 보기

데모에서는 위에서 하지 말라고 했던 바로 그 문제를 해결하기 위해 클래스를 사용했습니다. 같은 페이지에 문제 이미지와 고정 이미지를 원했기 때문에, 이것은 단지 데모 목적으로 한 것입니다.