如何消除2个内容之间的小差距？(How to remove small gap between 2 content?)

  *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
   
    background-color: green;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: white;
}
input[type="submit"] {
    background-color:blue;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: white;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
} 
  
<input type="text" id="subscription-email-text-field" name="email" placeholder="box 1">
<input type="submit" id="subscribe-button" value="subscribe"> 
  
 
 
 我有一个文本框和一个按钮，我想让它内联。 但不知何故，它们之间存在很小的差距。 
 
 我正在尝试设置填充和边距，但它不会改变 
 
 如何删除它？ 所以它看起来像这样  
 
 
  
  
  *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
   
    background-color: green;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: white;
}
input[type="submit"] {
    background-color:blue;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: white;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
} 
  
<input type="text" id="subscription-email-text-field" name="email" placeholder="box 1">
<input type="submit" id="subscribe-button" value="subscribe"> 
  
 
 
I have a textbox and a button i want to make it inline. But somehow there is a small gap between them.
 
I'm trying to set up the padding and margin but it doesn't change
 
How to remove it ? So it will look like this 
                
最满意答案
                
                    
                        
 删除元素之间的空格。 两个input元素之间有一个空格，因此您将获得不需要的空间。 
 
 请尝试以下代码段 
 
 
 
  
  
  *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
   
    background-color: green;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: white;
}
input[type="submit"] {
    background-color:blue;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: white;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
} 
  
<input type="text" id="subscription-email-text-field" name="email" placeholder="box 1"><input type="submit" id="subscribe-button" value="subscribe"> 
  
 
Remove the space between elements. You have a space between the two input elements, so you are getting that unwanted space.
 
Try below snippet
 
 
 
  
  
  *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
   
    background-color: green;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: white;
}
input[type="submit"] {
    background-color:blue;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: white;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
} 
  
<input type="text" id="subscription-email-text-field" name="email" placeholder="box 1"><input type="submit" id="subscribe-button" value="subscribe">