如何去除标签和输入之间的多余空间

Question

有一个带有几个标签和输入的侧栏。我想去掉一对标签和输入之间的空格。如何移除空间？标签和输入之间的间距。

以下是html 的主要部分

* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}

<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label>Name</label>
<input type="text" placeholder="Name">
</div>
<div class="sidebar-input-wrapper">
<label>Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>

Answer 1

解决这个问题的唯一方法是为这两个元素设置边距或填充。我建议你设置padding&标签和输入的边距都为0，如果你仍然想缩小差距，有时你可能需要设置一个负边距，这是不推荐的，但仍然可以完成任务。在你的标签上试试这个

.label {
/*margin-bottom: -5px;*/
margin-bottom: 0px
}

在HTML 中

<label class="lable">...</label>

同样，这种增加负利润的做法是非常不鼓励的。

编辑：我错过了display:inline块属性，有人在评论中提醒我以上修复不起作用，但将标签的边距设为底部：0将起作用js小提琴：

* {
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.container {
width: 80%;
margin: auto;
}
aside#sidebar-wrapper {
padding: 5px;
width: 300px;
border: 2px black solid;
}
aside#sidebar-wrapper input {
width: 100%;
}

.lable {
margin-bottom: 0px;
}

<div class="container">
<aside id="sidebar-wrapper">
<h1>Get A Quote</h1>
<form action="" class="form-sidebar-wrapper">
<div class="sidebar-input-wrapper">
<label class="lable">Name</label>
<input type="text" placeholder="Name" class="nameINput">
</div>
<div class="sidebar-input-wrapper">
<label class="lable">Email</label>
<input type="email" placeholder="Enter Email">
</div>
<button type="submit" class="button_1">Send</button>
</form>
</aside>
</div>

Answer 2

实际上，这是由…代码中的新行引起的。这是label和input之间的新线。我不知道为什么会显示这条新行，但我遇到过类似的行为，即使它们的顺序不同，也可以将其渲染为空间
事实上，即使在片段中，如果您尝试选择标签文本，然后将鼠标稍微向下移动到"；额外空间"；您将看到选择如何增加1个字符的"0"；什么都没有">
我以为我看到了一些东西，但是https://www.tutorialrepublic.com/faq/how-to-remove-the-space-between-inline-block-elements-in-css.php实际上，在第1页显示的方法中，建议删除这些新行以删除多余的空间
所以。。。我想我们应该小心代码中额外的新行。或将父级上的flex用作https://www.geeksforgeeks.org/how-to-remove-the-space-between-inline-block-elements/建议(font-size: 0并不总是适用于我(

Answer 3

如果没有应用边距或填充，但仍有此空间，则可以在父级上使用display: flex，或在标签上使用display: block/inline-block来消除这些空间。