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>
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>