Two inputs without space

Question

I just created a mailchimp form for my website and want to change the design. But between the email input and the button is a little white empty space. I played already a lot with the css code but I can't fix it by myself. I think it's not a big change but I don't get it correct.

Can you guys help me to remove the space and let me know, where is the issue in my code?

Thanks, Chris

#mce-EMAIL {
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #343434;
  padding: .7em 9em .7em 2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  background-color: rgb(240, 240, 240);
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  font-family: "Arial" inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  opacity: 0.9;
  border-style: solid;
  border: none;
}


/* Input Styles */

.button {
  clear: both;
  display: inline-block;
  width: 25%;
  letter-spacing: .03em;
  padding: .7em 2em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}


/* Button Styles */

#mc-embedded-subscribe {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 0;
}

#mc_embed_signup .mc-field-group input {
  /*display: block;*/
  /*width: 100%;*/
  /*padding: 8px 0;*/
  text-indent: 2%;
  width: 200px;
}

#mc_embed_signup input.mce_inline_error {
  border-color: #6B0505;
}

#mc_embed_signup input {
  border: 0px solid #999;
  -webkit-appearance: none;
}

#mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 3px;
}

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM">
        <input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
      <div class="clear text-center"></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->

Pedram · Answer 1 · 2017-12-25T16:38:11.353

I think best solution is display: flex. No more additional css.. It remove white space and make both input height equal.

Basic concepts of flexbox

.mc-field-group {
    display: flex;
}

.mc-field-group {
    display: flex;
}

#mce-EMAIL { 
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-size: 1em; 
  color: #343434; 
  padding: .7em 9em .7em 2em; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0;
    background-color: rgb(240, 240, 240);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
font-family: "Arial" inherit;

color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 5px;
opacity: 0.9;
  border-style:solid;
  border: none;
} /* Input Styles */


.button { 
  clear: both;
  display: inline-block;
width: 25%;
  letter-spacing: .03em; 
  padding: .7em 2em; 
  border: none; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0; 
  
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
} /* Button Styles */



#mc-embedded-subscribe{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

#mc_embed_signup .mc-field-group input {
 /*display: block;*/
 /*width: 100%;*/
 /*padding: 8px 0;*/
 text-indent: 2%;
  width: 200px;
}
#mc_embed_signup input.mce_inline_error {
 border-color: #6B0505;
}
#mc_embed_signup input {
 border: 0px solid #999;
 -webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
 display: block;
 margin-bottom: 3px;
  

}

<!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
              
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->

score 1 · Answer 2 · answered Dec 25 '17 at 16:29

this is because the browser refers to line items as words in the text. and between words it is necessary to put an inter-word interval.

just put a comment between the input, so that there is not a single blank or a line break between them.

#mce-EMAIL { 
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-size: 1em; 
  color: #343434; 
  padding: .7em 9em .7em 2em; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0;
    background-color: rgb(240, 240, 240);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
font-family: "Arial" inherit;

color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 5px;
opacity: 0.9;
  border-style:solid;
  border: none;
} /* Input Styles */


.button { 
  clear: both;
  display: inline-block;
width: 25%;
  letter-spacing: .03em; 
  padding: .7em 2em; 
  border: none; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0; 
  
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
} /* Button Styles */



#mc-embedded-subscribe{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

#mc_embed_signup .mc-field-group input {
 /*display: block;*/
 /*width: 100%;*/
 /*padding: 8px 0;*/
 text-indent: 2%;
  width: 200px;
}
#mc_embed_signup input.mce_inline_error {
 border-color: #6B0505;
}
#mc_embed_signup input {
 border: 0px solid #999;
 -webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
 display: block;
 margin-bottom: 3px;
  

}

<!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
              
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><!--
--><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->

Racil Hilan · Answer 3 · 2017-12-25T16:41:00.487

The issue is the white space between your two elements. The input element are inline elements and the white space between them is displayed as a single space. There are several ways to solve it and you can even use a different design like is suggested in the other answer, but you solve it in your current design by simply removing all the white space between the two elements, like this:

#mce-EMAIL {
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #343434;
  padding: .7em 9em .7em 2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  background-color: rgb(240, 240, 240);
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  font-family: "Arial" inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  opacity: 0.9;
  border-style: solid;
  border: none;
}


/* Input Styles */

.button {
  clear: both;
  display: inline-block;
  width: 25%;
  letter-spacing: .03em;
  padding: .7em 2em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}


/* Button Styles */

#mc-embedded-subscribe {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 0;
}

#mc_embed_signup .mc-field-group input {
  /*display: block;*/
  /*width: 100%;*/
  /*padding: 8px 0;*/
  text-indent: 2%;
  width: 200px;
}

#mc_embed_signup input.mce_inline_error {
  border-color: #6B0505;
}

#mc_embed_signup input {
  border: 0px solid #999;
  -webkit-appearance: none;
}

#mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 3px;
}

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">

        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
      <div class="clear text-center"></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->

Although this is a simple solution, it is not very elegant to have many elements on one long line. To split the line, you can make use of one HTML features which ignores the white space inside the tags, so just split inside the tags like this:

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"
    ><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Or like this:

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><
    input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Or you can convert the white space to a comment like this:

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><!--
    --><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Please note that most editors may break those solutions when they reformat your HTML, so either avoid reformatting or reapply the fix afterwards.

score -2 · Answer 4 · answered Dec 25 '17 at 16:31

-2

You don’t really provide enough data for anyone to answer without actually copying and running your code.

But what I suggest is you load web developer in Firefox and use the inspector to click first on your button.

Then you can see the html element on the bottom or left. There you can either add margin-left: -10px or margin-right: -10px or margin-too: -10px or margin-bottom: -10px and play with the numbers until it looks the way you want it to.

In your CSS it will probably look like this:

#mc-embedded-subscribe {margin-top: -10px;}

With this you are targeting the input button only and removing 10px between it and the field above it.

Good luck.enter code here

answered Dec 25 '17 at 16:31

Kaidawei

9
2

while your approach might pose a fix to the view problem , there are several other answers posted that provide better explanations as to why it happes and how to fix it without resorting to absolute positional fixes... – Patrick Artner Dec 25 '17 at 19:31
True. I took into consideration that he is still learning and the other examples may not match the problem/motivation level. It looks like he is just starting and the other two examples refer a solution that required more skill. There is no doubt there are more elegant solutions but obviously I felt my answer is what I would have wanted to hear when I had a similar question starting out. So I also agree with you but would put money on his implementation of my solution over these others. But he has solutions now as choices. – Kaidawei Dec 25 '17 at 19:34

Two inputs without space

4 Answers4

Basic concepts of flexbox