darkchampionz darkchampionz - 3 years ago 155
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?

enter image description here

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