なぜこのインラインブロックは完全に右揃えにならないのですか？

Question

display:inline-block;のdivがあり、コンテナはtext-align:right;ですが、divとコンテナの右側の間にはスペースがあるようです。どうしてそんなに端まで行きませんか？ここで

はフィドルです： https://jsfiddle.net/oqxm93c0/

私の目標は、黒のラインと右端に整列されるテキストです。また、私は可能な限り小さなCSSを使用することを好み、浮動小数点から逃げる傾向があります（特に、 "clearfix"タイプのメソッドを使用する必要がある場合）。

Thx！ ：]

Answer 1

inlineまたはinline-block要素は、要素内または周囲に空白を保持します。そのスペースを削除するには、HTMLのinline-block要素の間のスペースを削除するのが最も簡単な方法です。

コードアラインメント/インデントなどを維持する場合は、要素間にHTMLコメントを挿入するか、親のfont-sizeを0に設定し、子要素のfont-sizeをリセットすることもできます。

.container { 
 
    padding-top:6px; 
 
    text-align:right; 
 
    width:400px; 
 
    background: #eee; 
 
} 
 
.line { 
 
    width:100px; 
 
    height:2px; 
 
    background:black; 
 
    display:inline-block; 
 
}

<div class="container"> 
 
    <div class="line"></div><br><a href="#">Hello</a> 
 
</div>