なぜこの場合負のマージンが必要なのか

Question

プロジェクトでは、いくつかの標準のインラインブロック要素を処理しました。右の領域にカウント表示を得るために、私は負のマージン・トップを入れなければならなかった。私はなぜそれがそれ自身の合意の上に位置していないのか分かりません。カウントタイトルが地域などを占めているからでしょうか？なぜ私はそれをやらなければならなかったのか、それをやり遂げることを避けるためのよりよい方法があるか、それが正しいのかどうか、何が起こったのかを特定する方法があれば、同じように将来は。

https://jsfiddle.net/ybh9qz37/

.count-display { 
    height: 35px; 
    width: 65px; 
    background: black; 
    color: red; 
    display: flex; 
    float: left; 
    align-items: center; 
    border-radius: 5px; 
//why is this needed 
    margin-top: -60px; 
    margin-left: 40px; 
    font-family: Orbitron, sans-serif; 
    font-size: 200%; 
} 

Answer 1

のdivの多くの任意のdivを整理するための最良の方法は、グループのサブディビジョン（Subdivs）にあります。

たとえば、3つのサブディビジョンがあり、それぞれ異なる高さで上下しています。これは多くの問題を引き起こし、あなたはこのスキーマを使用する必要があります。

<div class="row2"> 
    // your left side div 
    <div class="left" style="display: inline-block;vertical-align: top;"> 
     <span class="count-title">Count</span> 
     <span class="count-display"><p>00</p></span> 
    </div> 
    // the right way is to create here <div class='right'> with similar styles as left   
    <span class="strict-button"> 
     <a rel="external" href="#button" class="button">Strict</a> 
     <span></span> 
    </span> 

</div 

とのお.count-titleを変更する：あなたは簡単に問題なく、将来的にあなたのstuctureを拡張し、保存することができます。この道を

.count-title { 
    display:block; 
} 

それは

を組織しました

Answer 2

フロートがどのように機能しているかを知っている必要があり、あなたの場合にマイナスのマージンが必要な理由がわかるはずです。

あなたは私はあなたがあなたの `厳しい-button`クラスは`カウントdisplay`がシフトしてしまったため、これまでの高さの良い量を持っている問題のより良い理解に Everything You Never Know about css float