title: Why height of paragraph and text box is not same in a Div?
body: <p>I have created a div with two child elements.</p>
  
  <ul>
  <li>a paragraph </li>
  <li>a input with type text.</li>
  </ul>
  
  <p>I have provided same height to both of them but on browser I am not getting same height for them. </p>
  
  <p>my html </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="./StyleSheet.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="textWbutton"&gt;
          &lt;p&gt;Enter Name&lt;/p&gt;
          &lt;input type="text" placeholder="I am placeholder" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>MY CSS</p>
  
  <pre><code>html,body
  {
      font-size: 0px;
  }
  
  .textWbutton
  {
  }
  
  .textWbutton input[type='text']
  {
      margin: 0px;
      padding-left: 10px;
      padding-right: 10px;
  
      height: 30px;
      display: inline;
  
      border-radius: 0px 5px 5px 0px;
      border: 1px solid Black;
  }
  
  .textWbutton p
  {
      font-size: 15px;
      margin: 0px;
      padding-left: 10px;
      padding-right: 10px;
  
      height: 100%;
      display: inline; 
      border-radius: 5px 0px 0px 5px;
      border: 1px solid Black;    
  }
  </code></pre>
  
  <p>Here if the fiddle for the same. <a href="http://jsfiddle.net/apoorvasahay01/mByYC/1/" rel="nofollow">http://jsfiddle.net/apoorvasahay01/mByYC/1/</a></p>
  
  <p>Please let me know what could have gone wrong here.</p>