How to remove whitespace between 2 select boxes?

Question

Hello everybody i think this problem happen all the time and i believe it's annoying to us all but does anyone know how to remove this white space from select boxes?

<select>
  <option>
    testing
  </option>
</select>
<select>
  <option>
    testing
  </option>
</select>

I've tried with styling margin to 0px but seems like it doesn't work :-( — Charlie Jackie, Oct 02 '19 at 08:12
Show an example of what you did on codepen, and let's see from there — dkasipovic, Oct 02 '19 at 08:12
You need to add your code into **the question itself** please see **[How to ask a question](https://stackoverflow.com/help/how-to-ask)**. — MattHamer5, Oct 02 '19 at 08:15

score 0 · Answer 1 · answered Oct 02 '19 at 08:16

There are a few ways to resolve this - one solution would be to use flex-box to remove this spacing by adding the following CSS to your document:

<!-- Add this styling -->
<style>
  body {
    /* Apply flex box to parent of select elements to remove whitespace */
    display: flex;
    flex-direction: row;
  }
</style>
<select>
  <option>testing</option>
</select>
<select>
  <option>testing</option>
</select>

score -1 · Answer 2 · answered Oct 02 '19 at 08:20

HTML has some default space between some elements, if they are on 2 separate lines of code.

So let me give an example on this:

<div class="group">
  Two selects with normal markup
  <select>
    <option>Option</option>
  </select>
  <select>
    <option>Option</option>
  </select>
</div>

<div class="group">
  Two selects with comment between each
  <select>
    <option>Option</option>
  </select><!--
  --><select>
    <option>Option</option>
  </select>
</div>

<div class="group">
  Two selects with no new line between each
  <select>
    <option>Option</option>
  </select><select>
    <option>Option</option>
  </select>
</div>

As you can see in the HTML, you can either add  before the opening tag of the 2nd select or you can put the opening tag of the 2nd select right after the end tag of the first one.

That way there is no spacing between them.

score -1 · Answer 3 · answered Oct 02 '19 at 08:20

Simply comment the spaces between the two boxes. Or don’t let spaces between closing tag and next opening tag.

<select>
  <option>
    testing
  </option>
</select><!--
--><select>
  <option>
    testing
  </option>
</select><select>
  <option>
    testing
  </option>
</select>

score -1 · Answer 4 · answered Oct 02 '19 at 08:22

This happens because the parent tag, in your case <body> has by default display: block. This little space you see comes from the new line where you put at your second <select> tag.

There are many options in order to overcome this: Either use float: left for your <select>, or change the display property of your parent tag.

How to remove whitespace between 2 select boxes?

4 Answers4