title: Understanding of css textarea offsets
body: <p>I made a simple example of textarea on jsfiddle with font-size and line-height.</p>
  
  <p><a href="http://jsfiddle.net/shkboca2/" rel="nofollow noreferrer">JSFiddle textarea</a></p>
  
  <pre><code>textarea {
      font-size: 20px;
      line-height: 4;
      height: 260px;
  }
  
  &lt;textarea&gt;
  A
  A
  A
  &lt;/textarea&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/pddUr.jpg" alt="Offsets between lines">
  <img src="https://i.stack.imgur.com/Z0PYO.png" alt="Small caret">
  <img src="https://i.stack.imgur.com/rSdLM.png" alt="Big caret"></p>
  
  <p>1) How does browser calculate the AREA_1 height and the AREA_2 height? Why are they different?</p>
  
  <p>2) How does browser calculate the caret size in the textarea? Why does the caret at the first line is much smaller that at the second line?</p>