頁邊距：與其他框中的行偏移

我已經構建了一個靜態儀表板，使用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%); 

}

來源

2017-02-13 Beren

由於您的「數據庫搜索」文本是一行，但您的「網站訪問者」文本是*兩個*，您需要指定您希望它們都錨定到該行的*頂部*，而不是默認行爲是錨定到底部。你可以通過在'med'，'sm'和'lg'類中應用'vertical-align：top;'來實現。 – Santi

第一個答案是正確的，但我會做到這一點是這樣的：因爲你設置的所有這些

：

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

爲了詳細適用於display: inline-block;，vertical-align的課程。由於您在該行的小紅色容器中放置了<br>,，並且由於vertical-align的默認值爲baseline，所以它將該行的中心向下推並排除了對齊。

來源

2017-02-13 21:57:24 Jesse

頁邊距：與其他框中的行偏移

回答

相關問題