title: input type submit wrong padding
body: <p>Here is my code :</p>
  
  <pre><code>&lt;script&gt;
      String.prototype.replaceAll = function(str1, str2, ignore){
         return this.replace(new RegExp(str1.replace(/([\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|&lt;\&gt;\-\&amp;])/g, function(c){return "\\" + c;}), "g"+(ignore?"i":"")), str2);
      };
  
      var searchList = {
        Google : "http://google.com/search?q=[Q]",
        Yahoo : "https://hk.search.yahoo.com/search?p=[Q]",
        DuckDuckGo : "https://duckduckgo.com/?q=[Q]",
        YahooKnowledgeHK : "https://hk.knowledge.yahoo.com/search/search_result?p=[QUERY]",
        Ebay : "http://search.ebay.com/[Q]"
      };
  
      function search(){
  
        try {
          searchEngine = document.querySelector("#searchEngine");
          searchQuery = document.querySelector("#searchQuery");
  
          window.location.href = searchList[searchEngine.value].replaceAll("[Q]", searchQuery.value);
        }
        catch (e){
          alert("Error : " + e + ".");
        }
      }
      &lt;/script&gt;
  &lt;style&gt;
      [searchBar] { 
        font-family: "Courier New", Courier, monospace; 
      }
  
      form[searchBar] { 
        margin: 0px; 
      }
  
      input[searchBar], select[searchBar] {
        display: inline-block;
        height: 30px;
        padding: 5px!important; 
        margin: 0px!important;
        line-height: 30px!important;
        border: 1px solid #000000;
      }
  
      input[type="submit"][searchBar] {
        background-color: #ffffff;
        transition: all 0.5s ease-in-out 0.1s;
      }
  
      input[type="submit"][searchBar]:hover { transform: rotate(360deg); }
  
      #search-bar[searchBar] {
        display: inline-block;
        margin: 0px;
        padding: 10px;
        border: 5px groove #000000;
        width: auto; height: auto;
        background-color: #fff;
        transition: all 0.5s ease-in-out;
      }
  
      #searchQuery[searchBar] {
          width: 100px;
          transition: all 0.5s ease-in-out;
      }
  
      #searchQuery[searchBar]:focus {
          width: 200px;
      }
  &lt;/style&gt;
  &lt;div searchBar id="search-bar"&gt;
    &lt;form searchBar id="search-form"&gt;
      &lt;select searchBar id="searchEngine"&gt;
        &lt;option disabled value=""&gt;Search Engine : &lt;/option&gt;
        &lt;option disabled&gt;&lt;/option&gt;
        &lt;option disabled&gt;Most Popular&lt;/option&gt;
        &lt;option selected value="Google"&gt;Google&lt;/option&gt;
        &lt;option value="Yahoo"&gt;Yahoo&lt;/option&gt;
        &lt;option value="DuckDuckGo"&gt;DuckDuckGo&lt;/option&gt;
        &lt;option disabled&gt;&lt;/option&gt;
        &lt;option disabled&gt;Learn Everything!&lt;/option&gt;
        &lt;option value="YahooKnowledgeHK"&gt;Yahoo! Knowledge HK&lt;/option&gt;
        &lt;option disabled&gt;&lt;/option&gt;
        &lt;option disabled&gt;Go Shopping&lt;/option&gt;
        &lt;option value="Ebay"&gt;Ebay&lt;/option&gt;
      &lt;/select&gt;
      &lt;input searchBar id="searchQuery" type="text" placeholder="Search......" /&gt;
      &lt;input searchBar type="submit" onclick="search();return false;" value="Search!" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsbin.com/sokorese/1/edit" rel="nofollow">JS Bin</a></p>
  
  <p>The submit button's padding-bottom is not quite right, while the padding-top is too high.</p>
  
  <p>What can I do (anything, HTML or CSS) to make the padding the same of the <code>input type="text"</code> and <code>select</code>?</p>
  
  <p>I had no idea what to do. Please help ^.^!</p>