5列、2列はマージントップ：高さ

Question

コンテナ内に5列あり、2マージンが必要です：50p;他の3人は依然としてトップにとどまっています。他のものに従う代わりに。デフォルトで

.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 

 
.column { 
 
    width: 19%; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background-color: #039BE5; 
 
} 
 

 
.margin { 
 
    margin-top: 50px; 
 
}

<div class="container"> 
 
    <div class="column"></div> 
 
    <div class="column margin"></div> 
 
    <div class="column"></div> 
 
    <div class="column margin"></div> 
 
    <div class="column"></div> 
 
</div>

Answer 1

、インライン要素が垂直基準線上に整列されています。列の垂直方向の配置をテキストトップに変更するだけです。

.column { 
    width: 19%; 
    height: 100px; 
    display: inline-block; 
    background-color: #039BE5; 
    vertical-align: text-top; 
}