🍙 😙 🙌 Why is the child input field larger than the parent div

<body>
  
  <header class="page-header js-page-header">
    <a class="page-header-logo-container" href="https://geek-answers.imtqy.com/index.html"></a>
    <div class="page-header-text">Geek Answers Handbook</div>
  </header>
  <section class="page js-page"><div itemscope="" itemtype="http://schema.org/QAPage" class="page"><div class="main-col" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question"><div class="question-header"><h1 itemprop="name">  Why is the child input field larger than the parent div </h1></div><div class="question"><div class="question-row"><div class="question-text"><div class="description" itemprop="text"><p>  HTML </p><pre class="prettyprint-override"><code class="hljs cs"><div <span class="hljs-keyword">class</span>=<span class="hljs-string">"wrap"</span>> <input <span class="hljs-keyword">class</span>=<span class="hljs-string">"field"</span> type=<span class="hljs-string">"text"</span>> <textarea <span class="hljs-keyword">class</span>=<span class="hljs-string">"field"</span> row=<span class="hljs-string">"10"</span>></textarea> </div></code> </pre> <p>  CSS </p><pre class="prettyprint-override"> <code class="hljs css"><span class="hljs-selector-class">.wrap</span>{<span class="hljs-attribute">width</span>:<span class="hljs-number">300px</span>;<span class="hljs-attribute">overflow</span>:hidden;<span class="hljs-attribute">padding</span>:<span class="hljs-number">10px</span>;} <span class="hljs-selector-class">.field</span>{<span class="hljs-attribute">display</span>:block;<span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;<span class="hljs-attribute">margin</span>:<span class="hljs-number">10px</span> <span class="hljs-number">0</span>;<span class="hljs-attribute">padding</span>:<span class="hljs-number">10px</span>;}</code> </pre><p>  I expect that the width of the text input and textarea should be exactly equal to the parent div.  but this is not so.  can anyone explain why? </p><p>  <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer">Living code</a> </p></div><div class="favorite hidden"><i class="far fa-star"></i></div><div class="votes-question"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +4 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="tags">  <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'css'" rel="tag">css</a> </div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">Arif</a></span></span> <time title="2013-03-23 05:13" itemprop="dateCreated" datetime="2013-03-23T05:13:28+0000">  Mar 23  '13 at 5:13 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><ins style="height: 90px;display: block;" data-zxname="zx-adnet" data-zxadslot="ZX-QRST" data-zxw="0" data-zxh="90" data-zxid="2" data-overlay="false"></ins><div class="answers " id="answers_hash"><div class="answers-header">  <span class="pull-left"><span itemprop="answerCount">4</span> answers</span> <div class="clearfix"></div></div><div class="answer-pager hidden"></div><div class="answer accepted" id="4510682_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  The total width is calculated as the sum of <code>padding</code> + <code>width</code> + <code>borderWidth</code> .  This is the default behavior for the box model.  You can change it using the <code>box-sizing</code> property.  In your case: </p><pre class="prettyprint-override"> <code class="hljs">.field { ... box-sizing: border-box; }</code> </pre><p>  <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src="">http://jsfiddle.net/aLz6b/3/</a> </p><p>  Further reading: <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src="">http://css-tricks.com/box-sizing/</a> </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +13 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">dfsq</a></span></span> <time title="2013-03-23 05:20" itemprop="dateCreated" datetime="2013-03-23T05:20:11+0000">  Mar 23  '13 at 5:20 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><ins style="height: 90px;display: block;margin-top: 15px;" data-zxname="zx-adnet" data-zxadslot="ZX-QRST" data-zxw="0" data-zxh="90" data-zxid="3" data-overlay="false"></ins><div class="answer rltd" id="4510683_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  This is because you applied <code>padding</code> to the .field <code>.field</code> and you see that it will work. </p><pre class="prettyprint-override"> <code class="hljs css"><span class="hljs-selector-class">.field</span>{<span class="hljs-attribute">display</span>:block;<span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;<span class="hljs-attribute">margin</span>:<span class="hljs-number">10px</span> <span class="hljs-number">0</span>;}</code> </pre><p>  <strong>OR</strong> </p><p>  you have a width of <code>100%</code> , so just set the width as shown below. </p><pre class="prettyprint-override"> <code class="hljs css"><span class="hljs-selector-class">.field</span> { <span class="hljs-attribute">display</span>: block; <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">280px</span>; }</code> </pre></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +3 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">Dipesh parmar</a></span></span> <time title="2013-03-23 05:20" itemprop="dateCreated" datetime="2013-03-23T05:20:31+0000">  Mar 23  '13 at 5:20 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><div class="answer bt" id="4510681_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  The <code>width: 100%</code> property applies to the content area, not to the border.  If you use CSS3, you can set <code>box-sizing: border-box</code> to get the expected size. </p><p>  <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer" src="">http://www.w3.org/TR/css3-ui/#box-sizing0</a> </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">dsh</a></span></span> <time title="2013-03-23 05:17" itemprop="dateCreated" datetime="2013-03-23T05:17:02+0000">  Mar 23  '13 at 5:17 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><div class="answer last" id="4510684_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="suggestedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Try the following: </p><pre class="prettyprint-override"> <code class="hljs css"><span class="hljs-selector-class">.wrap</span>{<span class="hljs-attribute">width</span>:<span class="hljs-number">300px</span>;<span class="hljs-attribute">overflow</span>:hidden;<span class="hljs-attribute">padding</span>:<span class="hljs-number">10px</span> <span class="hljs-number">0px</span>;}</code> </pre></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count " itemprop="upvoteCount">  0 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">Jesse</a></span></span> <time title="2013-03-23 05:21" itemprop="dateCreated" datetime="2013-03-23T05:21:22+0000">  Mar 23  '13 at 5:21 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><div class="answer-pager hidden"></div></div></div></div>
<section class="more-articles-navigation-panel js-more-articles-navigation-panel">
<h4>More articles:</h4>
<nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages">
<li><a href="../1471131/index.html">getting latitude and longitude using gps every 10 minutes in the background - android</a></li>
<li><a href="../1471132/index.html">Aligning the sensitive center div - html</a></li>
<li><a href="../1471133/index.html">Failed to load full Facebook comment plugins inside iOS UIWebView - ios</a></li>
<li><a href="../1471134/index.html">Facebook comment block inside UIWebView does not have the correct height - ios</a></li>
<li><a href="../1471135/index.html">Sorting an array by value and storing in a variable - sorting</a></li>
<li><a href="../1471137/index.html">flask: creating applications in a third-party application says: "ValueError: Attempting relative import in non-contact" - python</a></li>
<li><a href="../1471138/index.html">Scrollable touchpad - extjs</a></li>
<li><a href="../1471139/index.html">Why does automatic layout in table cells cause the table contents to resize incorrectly? - cocoa-touch</a></li>
<li><a href="../1471140/index.html">How to return a boolean value in Haskell - haskell</a></li>
<li><a href="../1471141/index.html">How to set the glow effect on ImageView? - android</a></li>
</ul></nav>
</section><br />
<a href="../../allArticles.html"><strong>All Articles</strong></a>
<script src="../../js/main.js"></script>

<script type="text/javascript" >
  (function (d, w, c) {
      (w[c] = w[c] || []).push(function() {
          try {
              w.yaCounter62683636 = new Ya.Metrika({
                  id:62683636,
                  clickmap:true,
                  trackLinks:true,
                  accurateTrackBounce:true,
                  webvisor:true
              });
          } catch(e) { }
      });

var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script"),
          f = function () { n.parentNode.insertBefore(s, n); };
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
          d.addEventListener("DOMContentLoaded", f, false);
      } else { f(); }
  })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/62683636" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-166339405-1', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>

</section>

<footer class="page-footer">
  <div class="page-footer-legal-info-container page-footer-element">
    <p>
      Geek Answers | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span>
    </p>
  </div>
  <div class="page-footer-counters-container page-footer-element">
    <a class="page-footer-counter-clustrmap" href='#'  title='Visit tracker'><img src='https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=IDRwb302jFsed82JlnSkxjeQ3C5_AObCmGX74jggris&co=3a3a3a&ct=ffffff'/></a>
  </div>
</footer>
  
</body>

</html>