Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CSS Value Unit">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <p style="color:blue"> 단위</p>
  <p id=id01 style="font-size: 1mm;">mm</p>
  <p id=id02 style="font-size: 1cm;">cm</p>
  <p id=id03 style="font-size: 1in;">in</p>
  <p id=id04 style="font-size: 1pt;">pt</p>
  <p id=id05 style="font-size: 1pc;">pc</p>
  <p id=id06 style="font-size: 1px;">px</p>
  
  <hr>
  <p style="color:blue"> 자기 자신</p>
  <p id=id1>1간격, p tag default font-size 16px</p>
  <p id=id2 style="letter-spacing: 1em">2간격</p>
  <p id=id3 style="letter-spacing: 1.5em">3간격</p>
  <p id=id4 style="font-size: 150%; letter-spacing: 1em">4간격</p>
  
  <hr>
  <p style="color:blue"> em 부모 상대 단위</p>
  <p id=id5 style="font-size: 1em">1폰트</p>
  <p id=id5 style="font-size: 2em">2폰트</p>
  <div id=id5 style="font-size: 2em"> div default font-size 10px 부모 상대
    <p id=id5 style="font-size: 1em">3폰트</p>
  </div>
  
  <hr>
  <p style="color:blue"> ex 단위</p>
  <p id=id1>1간격, p tag default font-size 16px</p>
  <p id=id2 style="letter-spacing: 2ex">2간격</p>
  <p id=id2 style="letter-spacing: 3ex">3간격 ex는 소문자 기준</p>
  <p id=id2 style="letter-spacing: 2em">4간격 em은 대문자 기준</p>
  
  <hr>
  <p style="color:blue"> % 단위</p>
  <p id=id5>1폰트</p>
  <p id=id5 style="font-size: 200%">2폰트</p>
  <div id=id5 style="font-size: 200%"> div default font-size 10px 부모 상대
    <p id=id5 style="font-size: 100%">3폰트</p>
  </div>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x