Remove blank spaces between buttons in HTML, CSS
Solution 1
Either remove the spaces and carriage returns, or put an HTML comment between them.
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button><!--
--><button class="mode">Normal</button><!--
--><button class="mode selected">Hard</button>
</div>
Solution 2
Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.
#stripe {
font-size: 0;
}
button {
font-size: 14px; // Set font size that you need here
}
Solution 3
Add display: flex;
to the parent container
Solution 4
If using bootstrap, can group buttons together by wrapping in div with class="btn-group". Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons. Can probably restyle.
Huy Tran
Updated on July 09, 2022Comments
-
Huy Tran almost 2 years
I want to remove blank spaces between the buttons, so that when I for example hover over the NORMAL button, there will be no blank space between it and the HARD button. How can I do that and where do these blank spaces come from?
body { margin: 0; } #stripe { background-color: white; text-align: center; height: 50px; color: black; } button { border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: black; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; outline: none; } button:hover { color: white; background: black; } .selected { color: white; background: black; }
<div id="stripe"> <button class="mode">Easy</button> <button class="mode">Normal</button> <button class="mode selected">Hard</button> </div>