Question

首先我无法找到相关的答案，因为我不知道它是否与内联块有关，所以也许已经有一些关于stackoverflow中的内联块但是因为我的问题是要知道问题出在哪里。我问的问题不是关于内联块的具体问题。

标题中的问题与如何删除空间无关，但它是什么......

如果你看看这个JSFiddle，确认前面就有一个空间。您无需检查元素即可查看它。只需将鼠标悬停在那里，光标就会变为文本光标。

我无法弄清楚那是什么空间，因为与名称和名称相同的确认会占用所有空间。

.GridHeader {
	width:100%;
	height:25px;
	background-color:#0860a3;
	white-space:nowrap;
	border-bottom:1px solid lightgray;
	overflow:hidden
}
.GridColumn {
	border-right:1px solid lightgray;
	display:inline-block;
	padding-left:5px;
	padding-right:5px;
	color:white;
	height:25px;
	line-height:25px;
}

<div id="GridHeader" class="GridHeader">
   <div id="colName" class="GridColumn" style="cursor:pointer;width:auto">Name</div>
   <div id="colConfirmation" class="GridColumn" style="cursor:pointer;width:auto">Confirmation</div>
</div>

Answer 1

您的列元素有display: inline-block。因此，标记中<div>元素之间的空格被解释为字间间距。

如果您保持CSS相同并更改标记，它将起作用：

<div id="colName" class="GridColumn" style="cursor:pointer;width:auto">Name</div><div id="colConfirmation" class="GridColumn" style="cursor:pointer;width:auto">Confirmation</div>

suggested duplicate question通过inline-block布局详细解释了此类问题，并提供了一些其他解决方案的建议。

确认前的空间是什么

1 个答案: