strict mode에서의 mysterious gap

xhtml transitional에서 strict로 변환후 미처 발견하지 못했던 문제점이 이제서야 보인다. image나 object의 아래쪽에 정체불명의 빈공간이 생겨버렸다. css를 수정하는 과정에서 생겨난 내 실수려니 했었지만 quirks mode나 transitional mode에서의 테스트에선 문제가 없는걸로 보아 strict의 자체적인 버그내지 특성으로 생각된다.

p {
    background: #f39;
    margin: 0;
    padding: 0;
    }

<p><img src="test.png" alt="test" /></p>

이 소스를 테스트해보면 strict mode에선 아래와 같이 이미지의 아래에 필요치않은 빈공간이 나타나게 된다. – 사진에서의 아래 핑크색 부분.

mysterious gap

이걸 해결해주려면 이와같이 별도의 style을 지정해주어야한다.

p img {
    display: block;
    }

mysterious gap fixed

display: block으로 해결이 된다고 하지만 엄청나게 번거로운건 사실이다. 그래서 다시 transitional로 돌아가련다. :(

updated @ 2005.8.7
strict모드에선 img 태그가 기본으로 inline속성을 띈다고 한다. inline의 경우 j 나 g 처럼 튀어나온 글자때문에 아래쪽에 약간의 여백이 기본으로 들어간다는 ilmol님의 설명.

4 Comments to “strict mode에서의 mysterious gap”

  • Hooney

    No.1 / 2005.05.14, 4:53 pm

    아.. 그런 버그가 있었네요. 예전부터 궁금했던 건데, p 안에 img 태그를 사용하는 게 옳은 표현이죠? 워드프레스 사용하기 전에는 특별히 p 태그 안에 img 태그를 사용해 본 기억이 없는 것 같네요.

    아마.. 예전엔 테이블 안에 그냥 집어 넣었던 것 같습니다. ^^;

  • jay

    No.2 / 2005.05.14, 5:01 pm

    저도 얼마전까지 div안에 넣곤 했었는데 단락으로 들어갈때는 p태그가 맞겠다 싶어서 모두 수정해줬습니다. 어떻게 들어갈지에 따라 다르지않을까 싶네요 :)

    후니님 블로그가 접속이 안되니 심심하군요 흐흐

  • 쿠키

    No.3 / 2005.06.08, 1:20 pm

    아.. 이런.
    이것때문에 얼마전에 고생했는데..
    이런방법이 있는 줄 몰랐네요~
    진작에 제이님 블로그 탐험 좀 할껄..

  • jay

    No.4 / 2005.06.08, 8:04 pm

    쿠키// 전 css수정해주기 귀찮아서 strict포기했어요 으흐

Archives...