title: Why padding is included in height sometimes?
body: <p>I have a text area and I added some CSS to it </p>
  
  <pre><code>&lt;textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name=""&gt;Have a question? ...&lt;/textarea&gt;
  </code></pre>
  
  <p>and CSS applied to it -</p>
  
  <pre><code>.test-input {
      border: 1px solid #D0D0D0;
      border-radius: 3px 3px 3px 3px;
      color: #646464;
      float: left;
      font-family: Arial;
      font-size: 12px;
      height: 20px;
      margin: 0 0 0 15px;
      padding: 5px;
      resize: none;
      width: 264px;
  }
  </code></pre>
  
  <p>And I get the text area with some padding inside it. In the cases when it works absolutely fine, text area height comes to be 20px with 5px padding not included in height. But, in few cases height of the text area includes padding and the height gets reduced to 8px. I have looked for any css if its overriding it but I didn't find. And I compared the result in both cases. Left is the reduced height and right is the expected height.</p>
  
  <p><img src="https://i.stack.imgur.com/JXnEn.png" alt="enter image description here">
  I can fix this issue, in other case managing height specifically, adding !important or with help of some JavaScript. But, I am wondering what's the cause here that's making such effect. Why and in which cases paddings are getting included with height or width?</p>