질문1) 위에처럼 html 을 구성할 경우 li 에 있는 이미지와 하단 선사이에(ul에 지정) 약 4px 정도 공백이 생깁니다.

li 에 직접 height 를 주면 해결되긴 한데 height 를 주지 않고 border-bottom 이 딱 붙게 할 수 있는 방법이 있을까요?

 

답변1) 이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)

이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는

<img>태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다.

 

질문2) 위의 li 태그에서 style 을 삭제하고 스타일에 img {vertical-align: middle;}

을 추가하면 li에 들어있는 이미지가 border-bottom위로 1px 내려 옵니다.

ul에 height 를 지정하면 정상적으로 보이나 파폭에서 1px 띄어져서 보이네요.

어떤 방법으로 해결할 수 있을까요?

 

답변2) 질문 2번 문제는 vertical-align 문제가 아닌거 같습니다.

일단 li 태그에 float: left;가 됨으로써 ul의 높이값이 사라지기 때문에 검은색 선이 위로 올라가게 됩니다.

하지만 IE에서는 정상으로 나오죠. IE 버그입니다.

 

그럼 해결 방안을 드리자면

아래와 같은 소스가 될듯 싶네요.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title> new document </title>
</head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
ul, li, dl, dt, dd {list-style: none;}
ul {width: 500px; border-bottom: 2px #000000 solid; overflow: auto; height: 100%;}
ul li { float: left;border: 1px solid #f18;}
ul li img {vertical-align: top;border: 0;}
</style>
<body>
<ul>
 <li><img src="test.gif"  /></li>
 <li><img src="test.gif" /></li>
</ul>
</body>
</html>

 

 

질문 1은 영문의 아래첨자의 의한 문제이고

질문 2번은 CSS의 float 속성의 의한 것입니다.

자세한 설명을 하자면 단순히 이 소스를 가지고 이해 시켜드리기가 어렵네요.

답변 주시면 자세한 설명 해 드리겠습니다.

HTML 및 CSS속성은 http://trio.co.kr/ 찾아보심 될듯 싶습니다

Posted by Finebe
,