html:css:inline

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- html:css:inline [2011/12/06 20:24]
kwon37xi 새로 만듦
+++ html:css:inline [2011/12/07 00:23] (현재)
kwon37xi [Firefox와 inline element 높이 height]
@@ 줄 4: / 줄 4: @@
 <code html>
-<!DOCTYPE HTML>
-<html lang="ko">
-<head>
-<meta charset="euc-kr">
 <style type="text/css">
-body {
+body { margin: 0; padding: 0; font-family: 굴림; font-size: 12px; }
-    margin: 0;
+span { margin: 0; padding: 0; }
-    padding: 0;
+</style>
-    font-family: 굴림;
-    font-size: 12px;
-}
-span {
-    margin: 0;
-    padding: 0;
-}
-    </style>
-</head>
-<body>
 <div>
     <span>이 Span 영역의 높이가 Firefox 8에서만 다릅니다.</span>
 </div>
-</body>
-</html>
 </code>
-위와 같은 상황일 때 <span> 영역은 글꼴의 크기가 12px이므로 12px이 나오는 것이 정상인데, Firefox(현재 8버전)에서 보면 높이가 14px로 측정된다.
+위와 같은 상황일 때 <span> 영역은 글꼴의 크기가 12px이므로 12px이 나오는 것이 <del>정상</del>인데, Firefox(현재 8버전)에서만 높이가 14px로 측정된다.
-이 현상이 Firefox의 경우 input 혹은 button 등에서도 일어나는 것으로 보인다.
+높이 height가 달라지는 이 현상은 Firefox의 경우 input 혹은 button 등에서도  일어나는 것으로 보인다.
+이 문제는 현재로써는 <span>에 **display: inline-block;**을 주면 해소가 된다.
+http://www.blog.highub.com/css/css-hacks/firefox-css-line-height-problem/ 에서 이 문제에 대한 활발한 논의가 이뤄졌다. 이것은 파이어폭스의 버그가 아니며 파이어폭스가 inline 요소의 높이를 계산하는 방법이 다른 브라우저와 달라서 생기는 현상이다.
+**inline 요소는 line-height를 지정할 수 없는게 맞고, inline 요소의 높이는 브라우저 재량으로 정해지는 것이다.**
-이 현상은 현재로써는 <span>에 **display: inline-block;**을 주면 해소가 되긴 한다. 하지만 정확히 문제가 무엇인지는 파악을 못하고 있다.
+따라서 inline 요소의 높이를 명시하고자 한다면 display: block; 혹은 display: inline-block;로 지정해야만 line-height/height 를 명시하는게 가능해진다. 또한 이렇게 하면 line-height를 명시하지 않더라도 FF의 경우 다른 브라우저와 마찬가지로 글자의 높이에 맞춰서 블록의 높이가 정해지게 된다.
+만약 **높이를 미세하게 조정하고자 한다면 해당 요소는 inline이 아닌 block 요소를 사용해야 하며, 그게 아니라면 block 스타일을 줘야만 한다.**

html/css/inline.1323170655.txt.gz · 마지막으로 수정됨: 2011/12/06 20:24 저자 kwon37xi