如何消除2個內容之間的小差距？

Question

*, *: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">

我有一個文本框和一個按鈕，我希望把它內聯。但不知何故，它們之間有一個小的差距。

我試圖建立填充和利潤率，但它不會改變

如何去除呢？所以它看起來像這樣

Answer 1

刪除元素之間的空間。你在兩個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">