Question

我试图将一个复选框设置为仅包含HTML和CSS的按钮，类似于Windows中的BS_PUSHLIKE样式。到目前为止，我的外观还不错，但是我不知道如何删除元素周围一些看似随意的填充/边距。这在“按钮”之间具有水平填充。如果将.switch元素的显示设置为table-cell，则可以删除水平填充，但是可以得到一吨垂直填充。

:root {
	--button-color: #ccc;
}

.switch {
	display: inline-block;
	background: var(--button-color);
	vertical-align: top;

	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */
}

.switch input {
	display: none;
}
.button {
	font-family: sans-serif;
	border: 2px outset var(--button-color);
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 5px 10px;
}
input:checked + .button {
	padding: 7px 8px 3px 12px;
	border-style: inset;
	background-color: rgba(255, 255, 255, 0.5);
}

<label class="switch">
	<input type="checkbox">
	<div class="button">Checkbox</div>
</label><br />

<label class="switch">
	<input type="checkbox">
	<div class="button">As</div>
</label>

<label class="switch">
	<input type="checkbox">
	<div class="button">Button</div>
</label><br /><br />

<label class="switch">
	<input type="radio" name="example">
	<div class="button">Radio</div>
</label>

<label class="switch">
	<input type="radio" name="example">
	<div class="button">As</div>
</label>

<label class="switch">
	<input type="radio" name="example">
	<div class="button">Button</div>
</label>

Answer 1

这些是自动转换的“空格”字符。在HTML中，将2个行内块元素之间的任何空白字符（空格，换行，制表符等）都转换为1个空格字符。在这种情况下，HTML中有一个换行符，因此插入了空白。

要删除这些空格，可以选择以下several methods之一。

删除标签元素周围的填充/边距

1 个答案: