html - 边距 : box offset from other boxes in row

Question

我构建了一个使用 CSS 设置样式的静态仪表板。这正是我想要的，但“数据库搜索”框被撞错了地方。我使用 CSS 为每一行设置了 10px 的底边距，但看起来这个框比它上面的框低 20px。我在我的代码中看不到任何解释这一点的内容。我怎样才能让这个框发挥得很好，与旁边的“网站访问者”框保持一致？

代码在这里:https://jsfiddle.net/oyayzze5/

.lg {

    width: 700px;
    height: 175px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    position: relative;

}

.med {

    width: 500px;
    height: 175px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    position: relative;
    display: inline-block;
}

.sm {

    width: 175px;
    height: 175px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    position: relative;
    display: inline-block 
}

.left-margin   {

    margin-left: 15px;

}

.row    {

    margin-bottom: 10px;
}

h2 {

    text-align: center;
}

p   {

    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.blue   {

        border-color: #41B6E6;
    background: linear-gradient(to bottom, #41B6E6 0%,#41B6E6 45%,white 45%,white 100%);

}

.red    {

    border-color: #ce2029;
    background: linear-gradient(to bottom, #ce2029 0%,#ce2029 45%,white 45%,white 100%);

}

.green  {

    border-color: #C4D600;
    background: linear-gradient(to bottom, #C4D600 0%,#C4D600 45%,white 45%,white 100%);

}

.orange {

    border-color: #E35205;
    background: linear-gradient(to bottom, #E35205 0%,#E35205 45%,white 45%,white 100%);

}

Answer 1

第一个答案是正确的，但我会这样做:

.sm, .med, .lg {
    vertical-align: top;
}

详细说明:

因为您已将所有这些类设置为 display: inline-block; , vertical-align适用。因为你放了一个 <br>在那h2在该行的红色小容器中，因为默认为 vertical-align是baseline , 它将行的中心向下推并偏离对齐。