マージンが崩壊して隣接する要素

Question

マージンの崩壊とそれがどのように機能するかについていくつかの研究を行いましたが、ほとんどの例では親子の状況が使用されています。 余白にしたい要素（div）に親がありません。

https://jsfiddle.net/3yaqdyz8/

<center> 
        <h2>Profile</h2> 
        Username goes here<br> 
        Balance: 0.00 <div class="coin coin-1"></div> 
</center> 

.coin 
{ 
    display:inline-block; 
    margin-top:5px; /*Problem here*/ 
    background: url('http://infrox.us.lt/coin.png'); 
    background-size:cover; 
    background-repeat:no-repeat; 
} 
.coin-1 
{ 
    height:25px; 
    width:25px; 
} 

私は、テキストの残りの部分よりも画像のdiv（.coin）が少し低いようにする必要があります。代わりに、divをその横のテキストとともに移動します。イメージdivのみを移動するにはどうすればよいですか？

Answer 1

インラインブロック要素のvertical-alignを使用してください。

それが十分でない場合は、あなたのような相対的な位置決めを使用して要素の位置を調整することができます

.center { 
 
    text-align: center; 
 
} 
 
.coin { 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    /*Problem here*/ 
 
    background: url('http://infrox.us.lt/coin.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    vertical-align: bottom; 
 
} 
 
.coin-1 { 
 
    height: 25px; 
 
    width: 25px; 
 
}

<div class="center"> 
 
    <h2>Profile</h2> 
 
    Username goes here 
 
    <br>Balance: 0.00 
 
    <div class="coin coin-1"></div> 
 
</div>

...ダウン 20ピクセル要素 をプッシュします

.coin 
{ 
    position: relative; 
    top: 20px; 
} 

。

JSfiddle

ところで：<center>は非推奨となり、廃止された要素であるされています。

この機能はWeb標準から削除されました。いくつかのブラウザはまだそれをサポートしているかもしれませんが、それは落とされつつあります。古いプロジェクトや新しいプロジェクトでは使用しないでください。それを使用しているページやWebアプリケーションは、いつでも破損する可能性があります。