Why is the input taking up 2 spaces?

Question

I have a problem with my input.

As you can see, my input is taking up too much space. It doesn't have margin or padding.

Here's my code (I am using Boilerplate v5.3.0).

How can I fix it so it just takes the space that it needs?

$(document).ready(function() {
  $('.selectList').hide();

  $('.selectorWrapper a').click(function() {
    hideShow(this);
  });
  $('ul.selectList li').click(function() {
    changeText(this);
    validate();
  });

  $('#email').keydown(function() {
    var correo = $('#email').val();
    if (validateMail(correo)) {
      $('#email').css('borderColor', '#87e466');
      validate();
    } else {
      $('#email').css('borderColor', '#ca3535');
      validate();
    }

  });


  function validateMail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    console.log(re.test(email));
    return re.test(email);
  }

  function validate() {
    var select1 = $('#selection1').text();
    var select2 = $('#selection2').text();
    var select3 = $('#selection3').val();
    var email = $('#email').val();

    if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
      $('#submitBtn').css({
        'backgroundColor': '#bbd550',
        'boxShadow': '0px 3px 0px 0px #9fbc2d'
      });
      $('#submitBtn').removeClass('disableClick');
    } else {
      $('#submitBtn').css({
        'backgroundColor': '#808080',
        'boxShadow': '0px 3px 0px 0px #636161'
      });
      $('#submitBtn').addClass('disableClick');
    }
  }

  function hideShow(element) {
    var thisId = $(element).attr('id');
    var isHidden = $('#' + thisId).next().css('display');
    console.log(isHidden);
    if (isHidden == 'none') {
      $('#' + thisId).next().slideDown();
    } else {
      $('#' + thisId).next().slideUp();

    }
  }

  function changeText(element) {
    var text = $(element).text();
    $(element).parent().prev().text(text);
    $(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
    $(element).parent().slideUp();
    $(element).parent().prev().css('borderColor', '#87e466')
  }




});

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

.disableClick {
  pointer-events: none;
}

label {
  display: none;
}

h3,
h2 {
  margin: 0 auto;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header.site-header {
  background-color: #000000;
  width: 100%;
}

header.site-header h3 {
  text-align: center;
  color: #ffffff;
  padding: 15px 0;
  font-weight: normal;
  font-size: 30px;
}

header.site-header h3 span {
  font-weight: bold;
}

div.banner {
  border-bottom: 5px solid #36aadd;
}

div.banner h2 {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  color: #36aadd;
  padding: 15px 10px 10px 10px;
}

div.banner p {
  color: #888888;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  padding-bottom: 50px;
  font-family: 'Open Sans', sans-serif;
}

div.form {
  padding: 20px 10px;
  margin: 0;
  background-color: #eeeeee;
}

a.selectButton {
  text-decoration: none;
  padding: 10px;
  color: #888888;
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  display: block;
  width: 100%;
  margin: 0;
}

a.selectButton i {
  color: #d0d0d0;
  float: right;
  padding-right: 10px;
}

ul.selectList {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #d0d0d0;
  width: 100%;
  position: absolute;
}

ul.selectList li {
  width: 100%;
  padding: 10px 0 10px 10px;
  display: block;
  background-color: #ffffff;
}

ul.selectList li a {
  display: block;
  text-decoration: none;
  color: #888888;
}

ul.selectList li:hover {
  background-color: #d0d0d0;
}

div.selectorWrapper input {
  margin: 0;
  padding: 10px;
  width: 100%;
  border: 1px solid #d0d0d0;
  border-top: none;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

div.selectorWrapper {
  /*width:100%;*/
}

.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
  width: 50%;
  float: left;
}

div.selectorWrapper .button {
  background-color: #808080;
  color: #FFFFFF;
  margin-top: 30px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 30px;
  box-shadow: 0px 3px 0px 0px #636161;
  border: none;
  font-family: 'Open Sans', sans-serif;
}

div.recuperar {
  text-align: center;
  padding: 20px;
}

div.recuperar a.recupera-link {
  text-decoration: none;
  color: #5faadb;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}

.contenedorA {
  position: relative;
}

@media only screen and (min-width: 768px) {
  label {
    display: block;
    width: 30%;
    float: left;
    padding: 10px 0 0 15px;
    text-align: left;
    font-size: 0.9em;
  }
  div.banner {
    border: none;
  }
  div.form {
    background: #ffffff;
  }
  .contenedorA {
    padding: 100px 50px 0 50px;
  }
  .contenedor {
    width: 96%;
    margin: 0 auto!important;
    box-shadow: 0px 0px 10px 3px #f9f9f9;
    margin-top: 50px;
  }
  div.selectorWrapper {
    width: 80%;
    margin: 20px auto;
  }
  div.selectorWrapper input,
  div.selectorWrapper a.selectButton {
    width: 70%;
    float: right;
    margin: 0 auto;
  }
  .selectorWrapper:nth-child(2),
  .selectorWrapper:nth-child(3) {
    width: 80%;
    float: none;
    position: relative;
  }
  ul.selectList {
    position: relative;
    margin-left: 420px;
    margin-top: 44px;
  }
  div.selectorWrapper input {
    border: 1px solid #d0d0d0;
  }
  div.recuperar {
    padding-left: 100px;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">


<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>

<body>
  <header class='site-header'>
    <h3><span>compara</span>online</h3>
  </header>
  <div class=contenedorA>
    <div class="contenedor">
      <div class="banner">
        <h2>Cotiza tu Seguro Automotriz</h2>
        <p>Resultados instantaneos!</p>
      </div>
      <div class="form clearfix">
        <form method="post" action="">

          <div class="selectorWrapper clearfix">
            <label>Marca : </label>
            <a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
            <ul class="selectList">
              <li><a href="#">Hyundai</a></li>
              <li><a href="#">Toyota</a></li>
              <li><a href="#">Nissan</a></li>
            </ul>
          </div>
          <div class="selectorWrapper clearfix">
            <label>Modelo : </label>
            <a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
            <ul class="selectList">
              <li><a href="#">Sedan</a></li>
              <li><a href="#">SUV</a></li>
              <li><a href="#">Pick-up</a></li>
            </ul>
          </div>
          <div class="selectorWrapper clearfix">
            <label>Anio: </label>
            <a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
            <ul class="selectList">
              <li><a href="#">2017</a></li>
              <li><a href="#">2016</a></li>
              <li><a href="#">2015</a></li>
            </ul>
          </div>
          <div class="selectorWrapper clearfix">
            <!--<label>Email : </label>-->
            <input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
          </div>
          <div class="selectorWrapper clearfix">
            <input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
          </div>
        </form>
        <div class="recuperar">
          <a class="recupera-link" href="#">Recuperar cotizacion</a>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src='js/main.js' type="text/javascript"></script>

Answer 1

When you float an element, you remove it from the normal flow of the document. As a result, other block elements don't respect their space.

Since both elements on the line (Modelo and Anio) are float: left, the next block element (Email) doesn't see them, and takes their space. So the Email div now lies hidden under the split elements.

However, the input element inside the Email div is not a block element. It's an inline element, by default. And inline elements respect the space of floated elements. (This is how text is able to wrap around floated images.)

So in your code, while the Email div shifts below the split element (on the z-axis), the input inside the Email div stays below the split element (on the y-axis).

When you highlight the Email element in dev tools, it illustrates this split across two rows.

One solution is to give the Email div display: inline-block and width: 100%.

div.selectorWrapper:nth-child(4) {
    display: inline-block;
    width: 100%;
}

Another solution is to add clear: both to the Email div. (Read more about clearing floats.)

div.selectorWrapper:nth-child(4) {
    clear: both;
}

$(document).ready(function() {
  $('.selectList').hide();

  $('.selectorWrapper a').click(function() {
    hideShow(this);
  });
  $('ul.selectList li').click(function() {
    changeText(this);
    validate();
  });

  $('#email').keydown(function() {
    var correo = $('#email').val();
    if (validateMail(correo)) {
      $('#email').css('borderColor', '#87e466');
      validate();
    } else {
      $('#email').css('borderColor', '#ca3535');
      validate();
    }

  });


  function validateMail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    console.log(re.test(email));
    return re.test(email);
  }

  function validate() {
    var select1 = $('#selection1').text();
    var select2 = $('#selection2').text();
    var select3 = $('#selection3').val();
    var email = $('#email').val();

    if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
      $('#submitBtn').css({
        'backgroundColor': '#bbd550',
        'boxShadow': '0px 3px 0px 0px #9fbc2d'
      });
      $('#submitBtn').removeClass('disableClick');
    } else {
      $('#submitBtn').css({
        'backgroundColor': '#808080',
        'boxShadow': '0px 3px 0px 0px #636161'
      });
      $('#submitBtn').addClass('disableClick');
    }
  }

  function hideShow(element) {
    var thisId = $(element).attr('id');
    var isHidden = $('#' + thisId).next().css('display');
    console.log(isHidden);
    if (isHidden == 'none') {
      $('#' + thisId).next().slideDown();
    } else {
      $('#' + thisId).next().slideUp();

    }
  }

  function changeText(element) {
    var text = $(element).text();
    $(element).parent().prev().text(text);
    $(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
    $(element).parent().slideUp();
    $(element).parent().prev().css('borderColor', '#87e466')
  }




});

div.selectorWrapper:nth-child(4) {
  clear: both;
}

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

.disableClick {
  pointer-events: none;
}

label {
  display: none;
}

h3,
h2 {
  margin: 0 auto;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

header.site-header {
  background-color: #000000;
  width: 100%;
}

header.site-header h3 {
  text-align: center;
  color: #ffffff;
  padding: 15px 0;
  font-weight: normal;
  font-size: 30px;
}

header.site-header h3 span {
  font-weight: bold;
}

div.banner {
  border-bottom: 5px solid #36aadd;
}

div.banner h2 {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  color: #36aadd;
  padding: 15px 10px 10px 10px;
}

div.banner p {
  color: #888888;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  padding-bottom: 50px;
  font-family: 'Open Sans', sans-serif;
}

div.form {
  padding: 20px 10px;
  margin: 0;
  background-color: #eeeeee;
}

a.selectButton {
  text-decoration: none;
  padding: 10px;
  color: #888888;
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  display: block;
  width: 100%;
  margin: 0;
}

a.selectButton i {
  color: #d0d0d0;
  float: right;
  padding-right: 10px;
}

ul.selectList {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #d0d0d0;
  width: 100%;
  position: absolute;
}

ul.selectList li {
  width: 100%;
  padding: 10px 0 10px 10px;
  display: block;
  background-color: #ffffff;
}

ul.selectList li a {
  display: block;
  text-decoration: none;
  color: #888888;
}

ul.selectList li:hover {
  background-color: #d0d0d0;
}

div.selectorWrapper input {
  margin: 0;
  padding: 10px;
  width: 100%;
  border: 1px solid #d0d0d0;
  border-top: none;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

div.selectorWrapper {
  /*width:100%;*/
}

.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
  width: 50%;
  float: left;
}

div.selectorWrapper .button {
  background-color: #808080;
  color: #FFFFFF;
  margin-top: 30px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 30px;
  box-shadow: 0px 3px 0px 0px #636161;
  border: none;
  font-family: 'Open Sans', sans-serif;
}

div.recuperar {
  text-align: center;
  padding: 20px;
}

div.recuperar a.recupera-link {
  text-decoration: none;
  color: #5faadb;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}

.contenedorA {
  position: relative;
}

@media only screen and (min-width: 768px) {
  label {
    display: block;
    width: 30%;
    float: left;
    padding: 10px 0 0 15px;
    text-align: left;
    font-size: 0.9em;
  }
  div.banner {
    border: none;
  }
  div.form {
    background: #ffffff;
  }
  .contenedorA {
    padding: 100px 50px 0 50px;
  }
  .contenedor {
    width: 96%;
    margin: 0 auto!important;
    box-shadow: 0px 0px 10px 3px #f9f9f9;
    margin-top: 50px;
  }
  div.selectorWrapper {
    width: 80%;
    margin: 20px auto;
  }
  div.selectorWrapper input,
  div.selectorWrapper a.selectButton {
    width: 70%;
    float: right;
    margin: 0 auto;
  }
  .selectorWrapper:nth-child(2),
  .selectorWrapper:nth-child(3) {
    width: 80%;
    float: none;
    position: relative;
  }
  ul.selectList {
    position: relative;
    margin-left: 420px;
    margin-top: 44px;
  }
  div.selectorWrapper input {
    border: 1px solid #d0d0d0;
  }
  div.recuperar {
    padding-left: 100px;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">


<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>

<body>
  <header class='site-header'>
    <h3><span>compara</span>online</h3>
  </header>
  <div class=contenedorA>
    <div class="contenedor">
      <div class="banner">
        <h2>Cotiza tu Seguro Automotriz</h2>
        <p>Resultados instantaneos!</p>
      </div>
      <div class="form clearfix">
        <form method="post" action="">

          <div class="selectorWrapper clearfix">
            <label>Marca : </label>
            <a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
            <ul class="selectList">
              <li><a href="#">Hyundai</a></li>
              <li><a href="#">Toyota</a></li>
              <li><a href="#">Nissan</a></li>
            </ul>
          </div>
          <div class="selectorWrapper clearfix">
            <label>Modelo : </label>
            <a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
            <ul class="selectList">
              <li><a href="#">Sedan</a></li>
              <li><a href="#">SUV</a></li>
              <li><a href="#">Pick-up</a></li>
            </ul>
          </div>
          <div class="selectorWrapper clearfix">
            <label>Anio: </label>
            <a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
            <ul class="selectList">
              <li><a href="#">2017</a></li>
              <li><a href="#">2016</a></li>
              <li><a href="#">2015</a></li>
            </ul>
          </div>
          <div class="selectorWrapper clearfix">
            <!--<label>Email : </label>-->
            <input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
          </div>
          <div class="selectorWrapper clearfix">
            <input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
          </div>
        </form>
        <div class="recuperar">
          <a class="recupera-link" href="#">Recuperar cotizacion</a>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src='js/main.js' type="text/javascript"></script>

Answer 2

In your question you are showing the properties of div, check properties of a tag inside div. The a tag is having padding:10px;.

Answer 3

This is happening because a.selectButton has padding of 10px. You can remove it completely or you can only remove the left padding to fix the problem.

a.selectButton {
  padding-left: 0;
}

Insert the above code in your style tag to fix the problem.