HTML Question
CSS buttons in a row strange space
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?
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download