html - インラインブロック要素のマージン

Question

HTML:

hello there! <div class='badge'>give this a small margin.</div> Please!​

CSS:

.badge {
   display: inline-block;
   margin-top: -2px;
}    

ここでフィドルを参照してください：http://jsfiddle.net/ThySQ/2/

div内のテキストにマージンを与える方法は? このようには機能しないようです。

Answer 1

インライン コンテンツに負のマージンを追加しても機能しません (少なくともほとんどのブラウザーでは)。テキストを上に移動する場合は、要素を相対的に配置し、上部を負の数に設定できます。

.badge {
   display: inline-block;
   top: -2px;
   position: relative;
}

http://jsfiddle.net/ThySQ/4/

Answer 2

div 内に余分なスペースを適用するには、div にパディングを適用する必要があります。

.badge {
   display: inline-block;
   margin-top: -2px;
   padding: 4px;  /* sets up a 4px margin all around the inside edge of the div */

}   

これは、div 内のコンテンツに影響します。