How to remove the extra space between label and input? - html

Question

There is a side bar with a couple of labels and input. I want to remove the space between a pair of label and input. How to remove the space?
Space between label and input.
Here is the main part of 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

The only way to tackle this issue is by setting margin or padding to the two elements.
I would advise you to set padding & margin 0 for both label and input and if you still want to reduce the gap, sometimes you will probably need to set a negative margin which is not recommended but still does the job.
try this on your label
.label {
/*margin-bottom: -5px;*/
margin-bottom: 0px
}
In HTML
<label class="lable">...</label>
Again, this practice of adding a negative margin is highly discouraged.
EDIT: I missed the display:inline-block property, which someone in comments reminded me of
Above fix won't work, Making margin-bottom: 0 for the label will work though
a js fiddle:
* {
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

Actually, this is caused by... New line in the code. That is new line between label and input. I am not sure why exactly this new line is being displayed, but I've encountered similar behavior even when the are in different order, when it can be rendered as space.
In fact, even in the snippet, if you try selecting the label text and then move your mouse slightly down to where that "extra space" is you will see how selection increases by 1 character of "nothing".
I thought I was seeing things, but https://www.tutorialrepublic.com/faq/how-to-remove-the-space-between-inline-block-elements-in-css.php actually suggests removing those new lines to remove the extra space in the 1st method shown on page.
So... I guess we should just be careful with extra new lines in our code. Or use flex on parent as https://www.geeksforgeeks.org/how-to-remove-the-space-between-inline-block-elements/ suggest (font-size: 0 does not always work for me)

Answer 3

If you have no margin or padding applied and you still have this space, you could either use display: flex on the parent or display: block/inline-block on the label to get rid of these.