CSSグリッドの行間のスペースを減らす

Question

行間の間隔を減らす方法を知りたいですか？私はマージンとパディングを0に設定しようとしましたが、何も噛んだようです。

デスティネーションビューは左側、右側はモバイルビューです。

.content{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    display: grid; 
    grid-gap: 5px; 
    grid-template-columns: repeat(36, 1fr); 
    justify-items: stretch; 
    align-content: start; 
    } 

.one{ 
    grid-column: 1/37; 
    width: 100%; 
} 

.two{ 
    grid-column: 1/11; 

} 
.three{ 
    grid-column: 12/24; 
    justify-self: center; 
    align-self: start; 
    position: relative; 
    bottom: 5px; 
} 
.four{ 
    grid-column: 25/37; 
} 

ここでテストサイトへのリンクです： http://www.acm.no/test/valhall/

Answer 1

問題が.ctrlから来ています。それはあなたが減らす必要があるスペースを取っている。その位置はの相対と：

です。その ノーマル位置に対して相対的に配置されます。

の相対配置された要素の上、右、下、左のプロパティを設定すると、 の通常位置から調整されます。 他のコンテンツは、 の要素によって残された任意のギャップに収まるように調整されません。

.ctrl { 
    max-width: 30px; 
    position: relative; 
    bottom: 40px; 
    color: black; 
    text-align: left; 
    padding-left: 1%; 
    margin-bottom: -40px; /*added this line*/ 
} 

それとも、絶対位置を使用して、このようなコードを調整することができます：

.one,.two,.three { 
    position:relative; 
} 
.ctrl { 
    max-width: 30px; 
    position: absolute; 
    bottom: 10px; 
    color: black; 
    text-align: left; 
    padding-left: 1%; 
} 

あなたはCSS positioningの詳細を読むことができを

あなたはこの問題を解決するために、負のマージンを追加することができます

Answer 2

この隙間は行間に存在しません。行は近くにあります。

ギャップは、100％の高さを満たしていないグリッド項目内のコンテンツの結果です。

その後、あなたは一番下のスペースを占有第二の要素を持っています。

<div class="ctrl"> 

あなたはその要素で何をすべきかを決定する必要があります。それを文書フローから削除するには、絶対配置を考慮してください。レイアウト内のスペースを占有しません。

いずれの場合も、その要素がなく（オプションでvertical-alignを追加した場合）、ビデオがグリッド項目を埋め尽くします。

（またそのコンテナを埋めるために動画/画像を取得するためのobject-fitプロパティに見える。）