Уменьшите разрыв между строками текста в сетке

#html #css #css-grid

Вопрос:

 .container {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
}

.top {
  grid-row: 1;
  font-size: 18px;
}
  
.bottom {
  grid-row: 2;
  font-size: 14px;
}

 <span class="container">
  <span class="top">Top</span>
  <span class="bottom">Bottom</span>
</span>

Как я могу сдвинуть нижнюю и верхнюю части по вертикали ближе друг к другу?

Я пытался

grid-gap: -10px на .container
height: calc(100% - 10px) на .bottom
top: -10px на .bottom

Но в любом случае ничего не меняется

1. Сетка, кажется, в порядке. Вы хотите, чтобы верхний и нижний элементы перекрывались?

2. что вы подразумеваете под сокращением ? на сколько вы хотите снизить ? 🙂

3. Можете ли вы добавить верхнее и нижнее поля и попробовать?

Ответ №1:

Вы можете использовать line-height , чтобы уменьшить расстояние между ними. Если это то, что вы ищете. ( уменьшить пространство-это расплывчатая просьба )

Проверьте ниже для сравнения ( первые элементы имеют добавленную высоту строки )

 .container {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
}

.top {
  grid-row: 1;
  font-size: 18px;
}
  
.bottom {
  grid-row: 2;
  font-size: 14px;
}

.top.custom {
  line-height:18px;
  }
  .bottom.custom {
  line-height:14px;
  }

 <span class="container">
  <span class="top custom">Top</span>
  <span class="bottom custom">Bottom</span>
</span>

<span class="container">
  <span class="top">Top</span>
  <span class="bottom">Bottom</span>
</span>

1. Это лучший ответ для меня, потому что помимо того, что он выглядит так, как я хочу, он также изменяет размер нижней ячейки и сетки в целом, чтобы они были короче и отражали визуальные эффекты.

Ответ №2:

Вы можете translateY примерить .bottom (отрицательное значение) или .top (положительное значение)

 .container {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
}

.top {
  grid-row: 1;
  font-size: 18px;
}
  
.bottom {
  grid-row: 2;
  font-size: 14px;
  transform: translateY(-10px);
}

 <span class="container">
  <span class="top">Top</span>
  <span class="bottom">Bottom</span>
</span>

 .container {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
}

.top {
  grid-row: 1;
  font-size: 18px;
  transform: translateY(10px);
}
  
.bottom {
  grid-row: 2;
  font-size: 14px;
}

 <span class="container">
  <span class="top">Top</span>
  <span class="bottom">Bottom</span>
</span>

Ответ №3:

Просто добавьте margin: top это, что позволит вам сократить разрыв

 .container {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
}



.top {
  font-size: 18px;
}
  
.bottom {
  font-size: 14px;
  margin-top: -10px;
}

 <span class="container">
  <span class="top">Top</span>
  <span class="bottom">Bottom</span>
</span>