All geek questions in one place

Two entrances without a seat

I just created a mailchimp form for my website and want to change the design. But between the email input and the button there is a little empty blank space. I played a lot with css code, but I can't fix it myself. I think this is not a big change, but I do not understand it.

Can you guys help me remove the space and tell me where the problem is in my code?

Thank you, 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-->
Run codeHide result
+4
source share
4 answers

I think the best solution is display: flex. No more extra css.. It removes the empty space and makes both entry heights equal.

Flexbox concepts

.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-->
Run codeHide result
+1
source

, . .

, , .

#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-->
Hide result
+1

. input inline, . , , , , , :

#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-->
Hide result

, . , HTML, , :

<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 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 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>

, , HTML-, , .

+1

, , .

- Firefox , .

html . margin-left: -10px margin-right: -10px margin-too: -10px margin-bottom: -10px , , .

CSS :

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

In doing so, you only aim the enter button and delete 10px between it and the field above it.

Good luck. enter code here

-2
source

Source: https://habr.com/ru/post/1691330/

More articles:


All Articles