html - 为什么在这种情况下需要负 margin 顶部

Question

在做一个元素时，做了一些标准的内联 block 元素。为了让计数显示在正确的区域，我必须在顶部放置一个负边距。我不确定为什么它不会自行放置在那里。是因为伯爵称号占了面积还是别的？我想知道为什么我必须这样做，是否有更好的方法来避免将来必须这样做，或者我是否做对了，以及如何确定发生了什么，以便我可以确保我以同样的方式做 future 。

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 的最佳方法是对子 div 进行分组。

例如，在您的情况下，您有 3 个 subdivs，它们的高度各不相同。这会导致很多问题，您应该使用此模式:

<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 更改为:

.count-title {
    display:block;
}

通过这种方式，您可以在未来轻松扩展您的结构而不会出现问题并将其保存得井井有条