<分区>
html - CSS 按钮排成一排奇怪的空格
我试图连续显示两个带有图像的按钮。我使用:
.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>代码运行正常，但为什么红色边框的底线有1px的空间？此外，我怎样才能同时删除两个按钮之间的红色空间？
最佳答案
只需删除按钮之间的空格: 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>
关于html - CSS 按钮排成一排奇怪的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46504374/