我想删除按钮之间的空格,以便当我将鼠标悬停在NORMAL按钮上时,它与HARD按钮之间不会有空格.我该怎么做？这些空白区域来自哪里？
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>
解决方法
删除空格和回车符,或在它们之间放置HTML注释.
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>
