내 <a> 요소 아래에 4px의 여분의 패딩이 나타나는 이유는 무엇입니까?

요소 아래에 몇 가지 여분의 패딩이 표시됩니다. Firefox와 Chrome에서이 매니페스트가 표시됩니다. 플리커 (Flickr)에서 초창기에이 현상을 보았던 것은 기억에 남는 파란색 막대였습니다.

여기 내 문제를 설명하는 link to the example code입니다. 배경 : 의은 빨간색으로 표시되고 테두리는 입니다. img은 회색으로 표시됩니다. 보시다시피 요소가 img 아래의 약 4 픽셀 확장됩니다.

코드는 단지 당신이 창 위로 마우스를 가져 가면 오른쪽 상단에 표시되는 링크 "JSBIN에게를 사용 편집의"를 눌러 참조하십시오.

을 제거하는 방법에 대한 아이디어가 있다면 요소의 추가 하단 패딩?

감사
아담

2010-08-04 Anonymous

은 IMG의 CSS 속성에 vertical-align:bottom;를 추가합니다.

2010-08-04 15:50:45 pixeline

예. 이미지가 텍스트와 동일한 기준선에 있지 않습니다. 감사합니다 @ 픽셀 라인 – Rob

. 그것은 효과가 있었다. 이미지가 항상 기준선 위에 항상 올려 놓도록 @Rob? –

@pylonicon베이스 라인은 모든 요소에 대해 기본값입니다. – mqklin

-1

나는 그것이 왜 발생하는지에 대해 긍정적이지는 않지만 YUI Reset을 시도해 볼 수 있습니다.

2010-08-04 15:55:53

모든 CSS 파일의 시작 부분에 YUI 재설정을 포함하는 것이 가장 좋습니다. –

나는 CSS 파일을 링크하기 전에 YUI Reset을 별도로 연결하는 것이 더 좋다고 생각한다. –

a {display: inline-block} 
img {display: block}

이미지는 기본적으로 인라인 렌더링 당신은 문제를 해결하기 위해 display: block 또는 vertical-align: bottom를 추가해야합니다.

2016-09-06 15:21:45 mironcatalin

답변