title: CSS fixing of search box
body: <p>Height of <code>submit field</code> is slightly smaller than the <code>text input</code> field. How do I fix it?</p>
  
  <p>HTML code: </p>
  
  <pre><code>&lt;form name="searchBox" id="searchBox" action="#" method="post"&gt; &lt;input type="text" name="query" id="query"/&gt; 
  &lt;input type="submit" name="sub" id="sub" value="Search"/&gt; &lt;/form&gt;
  </code></pre>
  
  <p>CSS code: </p>
  
  <pre><code>form input[type="text"] {
  height: 28px;
  width: 300px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  border: 1px solid #CCCCCC;
  }
  
  form input[type="submit"] {
  height: 28px;
  width: 80px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  }
  </code></pre>