title: Why doesn't line-height work on my input / form element?
body: <p>I have a row of elements, every other element will accept a line-height, except the search, which is a <code>&lt;form class=""&gt;</code> with inputs and an absolute position search button.</p>
  
  <p>Here's how it should look:
  <a href="https://i.stack.imgur.com/AJKaZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJKaZ.png" alt="The search is properly aligned."></a></p>
  
  <p>vs. how it actually looks (no line-height, item stuck to top):</p>
  
  <p><a href="https://i.stack.imgur.com/3AdJk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3AdJk.png" alt="The search is glued to the top, no space."></a></p>
  
  <p>I've tried several things such as displaying in-line and removing Chrome's default <code>-webkit</code> stylings that were applied, but none seemed to have worked.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
  
      &lt;meta http-equiv="X-UA-Compatible" content="IE-edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link rel="icon" href="../../favicon.ico"&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;link href="css/header/style-header_1.css" rel="stylesheet"&gt;
  
      &lt;!-- External CSS --&gt;
      &lt;link rel="stylesheet" href="socicon/style.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="header"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="header-social-icons-list col-sm-4"&gt;
                      &lt;ul id="social-icons-header"&gt;
                          &lt;li id="facebook"&gt;&lt;a href="www.facebook.com"&gt;&lt;i class="socicon-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="googleplus"&gt;&lt;a href="www.plus.google.com"&gt;&lt;i class="socicon-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="twitter"&gt;&lt;a href="www.twitter.com"&gt;&lt;i class="socicon-googleplus"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="header-logo col-sm-4"&gt;
                      &lt;img src="img/logo.png" alt="Logo"&gt;&lt;a href="www.google.com"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="header-search-box col-sm-4"&gt;
                      &lt;form class="header-search" method="get" action="post.php"&gt;
                          &lt;input name="search-box" type="text" placeholder="Search" class="form-control"/&gt;
                          &lt;input name="search-button" type="button" value="Search" class="button-control"/&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;ul class="menu col-sm-12"&gt;
                  &lt;li class="menu-item-1"&gt;&lt;a href="http://www.google.com/"&gt;Home&lt;/a&gt;
                      &lt;ul class="menu-dropdown"&gt;
                          &lt;li class="menu-dropdown-item-1"&gt;&lt;a href="http://www.google.com/"&gt;SubOne&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-dropdown-item-2"&gt;&lt;a href="http://www.google.com/"&gt;Sub Two&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="menu-dropdown-item-3"&gt;&lt;a href="http://www.google.com/"&gt;Sub Three&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="menu-item-2"&gt;&lt;a href="http://www.google.com/"&gt;Features&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu-item-3"&gt;&lt;a href="http://www.google.com/"&gt;Recipes&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu-item-4"&gt;&lt;a href="http://www.google.com/"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu-item-5"&gt;&lt;a href="http://www.google.com/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>/* Global Line-height */
  
  .header .header-social-icons-list,
  .header .header-search-box,
  .header .header-logo {
      line-height: 130px;
  }
  
  
  .header .header-social-icons-list a {
      text-decoration: none;
  }
  
  .header .header-social-icons-list li {
      display: inline;
      margin-right: 14px;
      text-decoration: none;
  }
  
  .header .header-social-icons-list ul {
      list-style: none;
      padding: 0 0 0 0;
  }
  
  .header .header-logo img {
      max-height: 110px;
  }
  
  .header .menu {
      line-height: 60px;
      z-index: 1;
      text-align: center;
      margin-top: 24px !important;
  }
  
  .header .menu &gt; li {
      font-family: Montserrat, sans-serif;
      font-size: 12px;
      font-weight: 600;
      display: inline-block;
      position: relative;
      text-transform: uppercase;
      letter-spacing: 3px;
      margin: 0 12px 0 12px;
      text-align: center;
  }
  
  .header .menu li a {
      color: #525252;
  }
  
  .header .menu li a:hover {
      text-decoration: none;
      color: #777777;
  }
  
  
  /* Dropdown */
  
  .header .menu .menu-dropdown {
      line-height: 24px;
      margin-top: 12px;
      background-color: white;
      padding-left: 0;
      position:absolute;
      z-index: -1;
      opacity: 0;
      top: 100%;
      left: 0;
      transition:opacity linear 0.1s;
      border: 1px solid #e5e5e5;
  
      -webkit-box-shadow: 0px 0px 130px -46px rgba(0,0,0,1);
      -moz-box-shadow: 0px 0px 130px -46px rgba(0,0,0,1);
      box-shadow: 0px 0px 130px -46px rgba(0,0,0,1);
  }
  
  .header .menu li:hover .menu-dropdown {
      z-index: 2;
      opacity: 1;
  }
  
  .header .menu .menu-dropdown li {
      margin: 0;
      text-align: left;
      padding: 13px 13px 13px 13px;
      display: block;
      white-space: nowrap;
      border-bottom: 1px solid #e5e5e5;
  }
  
  .header .menu .menu-dropdown li:last-of-type {
      border-bottom: 0;
  }
  
  .header .menu .menu-dropdown li a {
  }
  
  .header .header-search {
      float: right;
      margin: 0;
      position: relative;
  }
  
  .header .header-search .form-control {
      padding: 0 45px 0 20px;
  }
  
  .header .header-search .form-control {
      border-radius: 30px;
      border: 2px solid #f0f0f0;
      box-shadow: none;
      width: 240px;
      height: 48px;
  }
  
  .header .header-search .form-control:focus {
      border: 2px solid #dcdcdc;
  }
  
  .header .header-search .button-control {
      text-indent: -99999px;
      width: 20px;
      height: 20px;
      display: block;
      position: absolute;
      top: 30%;
      right: 24px;
      border: none;
      background: url('../../svg/search.svg') 0 0 no-repeat;
  }
  
  
  /* Responsive */
  
  @media only screen and (max-width: 768px) {
  
      .header .menu {
          display: none;
      }
  
      .header .header-social-icons-list,
      .header .header-search,
      .header .header-menu-bottom {
          display: none;
      }
  
      .header .header-logo {
          padding: 48px 0 48px 48px;
      }
  
      .header .header-logo img {
          max-width:100%;
          image-rendering: auto;
      }
  
  }
  
  @media only screen and (max-width: 468px) {
  
      .header .header-logo {
          bottom: 60px;
      }
  }
  
  @media only screen and (max-width: 990px) {
  
      .header .header-search .form-control {
          width: 120px;
      }
  }
  </code></pre>