Mozilla 한국 커뮤니티

span관련 질문이 있습니다.
UI작업중에
아래의 결과는 당연히 똑같이 표시 될거라고 생각했습니다.
그런데 ex2)의 <span>태그의 영향으로 ex1)보다 공백이 더
발생을 하는 문제가 발생하던군요. (폰트 사이즈 12px기준)

ex1) <h3>Title1 more</h3>과

ex2) <h3>Title1 <span>more</span></h3>

인라인 태그이지만 혹시나 하는 마음에 padding, margin등을 0으로
해봤지만, 역시나 똑같았습니다.

결국 span부분에 height 크기를
14px(15px부터 공백 발생)로 설정해서 로 해결이 되었습니다.
인라인 태그인데도 왜 이런 공백 문제가 발생 하는지 궁금합니다.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Untitled Document</title>
<style type="text/css">
* {font-size: 12px;}
</style>
</head>

<body>
<h3>Title1 more</h3>

<h3>Title1 <span>more</span></h3> 
</body>
</html>

이 코드를 랜더링 해 보시기 바랍니다. IE, Firefox, Opera 모두 동일하게 나옵니다.
span이 문제가 아나라 다른 곳에 문제가 있는 듯 합니다.

현석님께서 올려주신 소스 실행 해 보았습니다.
문제 없이 잘 실행 됩니다.
역시 span 태그의 문제가 아닌것 같습니다.

제가 문제의 부분에 해당하는 소스를 html 파일로 올려 놓았습니다.
어느 부분에서의 문제인지 한번 확인 해 주시겠습니까?
(Firefox에서는 잘 되는데, IE에서 간격이 안맞습니다.)

http://files.cafesta.net/temp/span_ex.html

Mozilla 한국 커뮤니티

span 태그에서의 공백 발생 문제

span 태그에서의 공백 발생 문제