删除CSS中堆叠元素之间的空白间距

Question

我正在尝试删除彼此堆叠的元素之间的间距。

这就是我所拥有的：

＆＃13;

＆＃13;

input[type="text"] {
  width: 40%;
  height: 30px;
  border-radius: 29px;
  border-style: none;
  padding-right: 100px;
  padding-left: 30px;
  border-width: 0;
}

input[type="submit"] {
  margin-left: -100px;
  height: 30px;
  width: 100px;
  border-width: 0;
  border-radius: 29px;
  background: blue;
  color: white;
  -webkit-appearance: none;
}

body {
  background-color: black;
}

＆＃13;

<br/>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>

＆＃13;

＆＃13;

＆＃13;

我已尝试过top:0;和bottom:0;，但在此示例中似乎无法解决我的问题。

Answer 1

删除输入的顶部底部填充[type =＆＃34; text＆＃34;]。

input[type="text"] {
  width: 40%;
  height: 30px;
  border-radius: 29px;
  border-style: none;
  padding-right: 100px;
  padding-left: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

Answer 2

我从两个元素中删除了height属性，并将其添加到容器form中。然后将display: flex添加到表单中。

＆＃13;

＆＃13;

form {
  height: 30px;
  display: flex;
}

input[type="text"] {
  width: 40%;
  border-radius: 29px;
  border-style: none;
  padding-right: 100px;
  padding-left: 30px;
  border-width: 0;
}

input[type="submit"] {
  margin-left: -100px;
  width: 100px;
  border-width: 0;
  border-radius: 29px;
  background: blue;
  color: white;
  -webkit-appearance: none;
}

body {
  background-color: black;
}

＆＃13;

<br/>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除padding-top

上的padding-bottom和input[type="text"]

padding-top: 0px;
padding-bottom: 0px;

input[type="text"] {
padding-top: 0px;
padding-bottom: 0px;
    width: 40%;
    height:30px;
      border-radius: 29px;
     border-style:none;
      padding-right:100px;
      padding-left:30px;
      border-width: 0;
}
input[type="submit"] {
 
    
    margin-left: -100px;
   height:30px;

    width: 100px;


    border-width: 0;
     border-radius: 29px;
    background: blue;
    color: white;
    -webkit-appearance: none;
}
body {
background-color: black;
}

<br/>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname"  placeholder="Enter your email"><input type="submit">
</form>