I have HTML button with below HTML and CSS:
<button tabindex="0" class="test_highlight">-</button>
.test_highlight{
align-items:center;
background-color:#fff;
color:#006296;
justify-content: center;
border:0;
display:flex;
height:24px;
width:36px;
border-radius:10% 0 0 10%;
padding:0;
margin-right:2px;
opacity:1;
font-size:20px;
}
Button is appearing correctly but when i use tab and focus comes to this button, it ads white space around the button as shown in screenshot. It is because i set slightly bigger font size and set the height and width. When i decrease font size then white space goes away but that is not acceptable solution as it lowers the font size of minus sign. Please help me out how can i remove extra white space on tab highlight without decreasing font size.