CSS buttons in a row strange space

Question

I am trying to display two buttons in a row with an image on them. I use:

.outer {
  background-color: gray;
  padding: 10px;
}

.inner {
  background-color: blue;
  padding: 10px;
}

.tab {
  background-color: red;
}

<div class="outer">
  <div class="tab">
    <button>
       <img src="http://www.insideredbox.com/images/ball_red.png">
      </button>
    <button>
       <img src="http://www.insideredbox.com/images/ball_red.png">
      </button>
  </div>
  <div class="inner">
    Test123
  </div>
</div>

Code works fine but why is there a space of 1px at the bottom line of red border? Moreover, how can I also erase the red space between the two buttons?

You should specify your browser, because in Chrome there is no mentioned 1px bottom margin. — Styx, Sep 30 '17 at 16:02
Run the snippet I've added to your question, does it show the same as your picture? — Styx, Sep 30 '17 at 16:05
button{ border:none;} would solve the 1px red space at bottom — ata, Sep 30 '17 at 16:08
I'm sorry, I can't debug code remotely :) Perhaps, your html code differs somehow. Btw, your `.outer` `
` didn't have closing tag. — Styx, Sep 30 '17 at 16:08
add `display: block` to the `img` or use `vertical-align: top` to remove the *gap below the image*... see the duplicates for removing *space between inline elements*... — kukkuz, Sep 30 '17 at 16:49

score 2 · Accepted Answer · answered Sep 30 '17 at 16:36

2

Just remove white spaces between buttons: https://jsfiddle.net/0ose31La/

<div class="outer">
    <div class="tab">
        <button>
            <img src="http://www.insideredbox.com/images/ball_red.png">
        </button><button>
            <img src="http://www.insideredbox.com/images/ball_red.png">
        </button>
    </div>
    <div class="inner">
        Test123
    </div>
</div>

answered Sep 30 '17 at 16:36

Dariusz Majchrzak

1,227
2
12
22

This seems to work... But why xd – darkchampionz Sep 30 '17 at 16:45

score 0 · Answer 2 · answered Sep 30 '17 at 16:23

There are a lot of tricks to remove space between elements with display: inline-block, but the most easy is "just float them".

Let's add float: left to buttons, put them into their own container: <div class="buttons">...</div> and apply clearfix trick to it.

.outer {
  background-color: gray;
  padding: 10px;
}

.inner {
  background-color: blue;
  padding: 10px;
}

.tab {
  background-color: red;
}

.buttons button {
  float: left;
}
 
.buttons:after {
  content: " ";
  display: table;
  clear: both;
}

<div class="outer">
  <div class="tab">
    <div class="buttons">
      <button>
      <img src="http://www.insideredbox.com/images/ball_red.png">
      </button>
      <button>
     <img src="http://www.insideredbox.com/images/ball_red.png">
      </button>
    </div>
    <div class="inner">
      Test123
    </div>
  </div>
</div>

ankita patel · Answer 3 · 2017-09-30T17:03:35.740

You can give font-size:0; to .tab class because button tag take by default display:inline-block. and you can also use float:left and clearfix.

<html>
<head>
<style>
.outer {
    background-color: gray;
    padding: 10px;
}
.inner {
    background-color: blue;
    padding: 10px;
}
.tab {
    background-color: red;
    font-size:0;
}
</style>
</head>
<body>

<div class="outer">
    <div class="tab">
        <button>
            <img src="http://www.insideredbox.com/images/ball_red.png">
        </button>
        <button>
            <img src="http://www.insideredbox.com/images/ball_red.png">
        </button>
    </div>
    <div class="inner">
        Test123
    </div>
</div>

</body>
</html>

CSS buttons in a row strange space

3 Answers3