减少CSS网格中行之间的空间 [英] Reduce space between rows in CSS Grid

问题描述

我想知道如何减小行之间的间距？我尝试将边距和填充设置为0，但似乎没有任何问题。

I'm wondering how to reduce the spacing between the rows? I've tried setting margins and paddings to 0, but nothing seems to be biting.

Destktop视图在左侧，移动视图在右侧。

Destktop view on the left and mobile view on the right.

.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/

Here's a link to a test site: http://www.acm.no/test/valhall/

推荐答案

问题出在 .ctrl 。它占用了您需要减少的空间。它的位置是相对和：

The issue is coming from .ctrl. It's taking the space you need to decrease. It's position is relative and :

位置为相对的元素；相对于其正常位置
定位。

An element with position: relative; is positioned relative to its normal position.

设置相对位置
的top，right，bottom和left属性会导致将其从正常位置的
进行调整。 其他内容将不会调整为适合
元素剩余的任何空白。

您可以添加负边距来解决此问题：

You can add negative margin to fix this :

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

或者您可以使用 absolute 位置并调整代码，如下所示：

Or you can use absolute position and adjust the code like this :

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

您可以阅读有关 CSS定位

这篇关于减少CSS网格中行之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！