確認の前に空白があります

Question

最初はインラインブロックかどうかわからないので、関連する答えが見つかりませんでした。おそらく、既にstackoverflowのインラインブロックに関するものがあります。問題です。私は問題が特にインラインブロックについてどこにないのかを尋ねています。

またタイトルに質問はスペースを削除する方法に関連しているが、それが何であるかされていません...

あなたはこのJSFiddleを見れば、確認の前にスペースがあります。あなたはそれを見るために要素を調べる必要はありません。その上にカーソルを置くだけで、テキストカーソルのカーソルが変わります。

名前と名前と同じ確認がすべてのスペースを必要とするため、そのスペースが何であるかわかりません。

.GridHeader { 
 
\t width:100%; 
 
\t height:25px; 
 
\t background-color:#0860a3; 
 
\t white-space:nowrap; 
 
\t border-bottom:1px solid lightgray; 
 
\t overflow:hidden 
 
} 
 
.GridColumn { 
 
\t border-right:1px solid lightgray; 
 
\t display:inline-block; 
 
\t padding-left:5px; 
 
\t padding-right:5px; 
 
\t color:white; 
 
\t height:25px; 
 
\t 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レイアウトを持つような困難についての詳細を説明し、他のいくつかの解決策のアイデアを提供します。