2013-09-04 2 views
0

인라인 요소 인 경우 스팬 요소의 높이를 지정하는 것이 실제로 중요합니다. 스팬 선택기의 높이에 설정 한 값에 관계없이 모양이 변경되지 않습니다. 여기 인라인 스팬 요소의 높이를 지정하는 이유

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <title>Relative Positioning</title> 
     <style type = "text/css"> 
      p    
      { 
       font-size: 1.3em; 
       font-family: verdana, arial, sans-serif; 
      } 
      span   
      { 
       color: red; 
       font-size: .6em; 
       height: .6em; 
      } 
      .super  
      { 
       position: relative; 
       top: -1ex; 
      } 
      .sub   
      { 
       position: relative; 
       bottom: -1ex; 
      } 
      .shiftleft 
      { 
       position: relative; 
       left: -1ex; 
      } 
      .shiftright 
      { 
       position: relative; 
       right: -1ex; 
      } 
     </style> 
    </head> 
    <body> 
     <p>The text at the end of this sentence 
      <span class = "super">is in superscript</span>. 
     </p> 

     <p>The text at the end of this sentence 
      <span class = "sub">is in subscript</span>. 
     </p> 

     <p>The text at the end of this sentence 
      <span class = "shiftleft">is shifted left</span>. 
     </p> 

     <p>The text at the end of this sentence 
      <span class = "shiftright">is shifted right</span>. 
     </p> 
    </body> 
</html> 

// 토니

만큼 <span> - 요소가 inline - 요소 ( its default)가 없습니다 높이의 값으로 정의되어
+0

@brbcoding 실제로'span'의 높이는'em'으로 설정됩니다. 그러나 참으로 많은 다른 것들은 'ex'를 사용하여 nada를 의미합니다. – powerbuoy

+0

그래, 왜 OP가 왜 그 예제가 작동하지 않는지 물어 보았다. (왜 그들이 아래 첨자, 위첨자처럼 보이지 않는지 ...) 다른 클래스의 위치 지정 (또는 그 부족) .super, .sub' 등) – brbcoding

+0

@brbcoding @ powerbuoy : 물론'ex'는 단위입니다. http://www.w3.org/Style/Examples/007/units.en.html – RichieHindle

답변

0

스팬은 인라인 요소입니다. 따라서 height 속성을 사용하지 않습니다. 어떤 종류의 높이라도 지정하려면 display:inline-block과 같은 CSS를 사용하십시오!

관련 문제