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

<分区>

我正在尝试使用 HTML 和 CSS 将复选框设置为按钮外观，类似于 BS_PUSHLIKE Windows 中的样式。到目前为止，我的外观非常漂亮，但我无法弄清楚如何删除元素周围一些看似任意的填充/边距。这在“按钮”之间有水平填充。如果我将 .switch 元素的显示设置为表格单元格，我可以删除水平填充，但随后会得到大量的垂直填充。

: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>

最佳答案

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

要删除这些空格，您可以选择其中一项 several methods .

关于html - 删除标签元素周围的填充/边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54605243/

上一篇：javascript - 创建一个带有背景图片的 Javascript 画廊

下一篇：javascript - 将文本悬停在带有图像的 div 上

javascript - 如何使用 html、css 中的样式属性更改文本

javascript - 纯 javascript 只切换一次使用 data-getAttribute 来比较

javascript - 改进表格渲染，最快的表格渲染

javascript - Highcharts - 实时更新柱形图

HTML aside 标签与 div 标签

css - 在横向模式下在移动 View 中显示/隐藏 div

javascript - Accordion 菜单 - 事件状态

javascript - 您可以在 javascript 文件中加载 img 标签的 src 然后将其绘制到 Canvas 上吗？

html - 在redirect_to之后 View 丢失CSS链接标签