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

Question

Я использую программу Anki, и я хотел бы уменьшить пробел между «Значение», «Пример», «Значение2» и «Пример2».

Image here shows what I mean

и мой код:

.card { 
font-family: Arial; 
font-size: 20px; 
text-align: center; 
color: black; 
background-color: white; 
} 

Answer 1

Дополнительное пространство между рядами, потому что вы определили высоту 300px в ячейке, содержащей изображение. Поскольку это таблица, следующая ячейка затем наследует высоту 300 пикселей.

Чтобы этого избежать, вам нужно сделать ячейку изображения прокруткой в ​​два ряда. Вы делаете это, добавляя rowspan="2" к вашей ячейке изображения и удаляйте пустую ячейку во второй строке.

Тогда вы также должны рассмотреть возможность создания изображения 300px в высоту вместо ячейки изображения. Иначе вы можете получить нежелательный результат.

---

Здесь я сделал иллюстрацию код:

Как вы можете себе, когда изображение-клетка, имеет высоту 300px ячейки рядом с ним, также будет иметь его, потому что ячейки в той же строке не могут иметь несколько высот. Вот почему во второй ячейке столько текста меньше .

А вот, если вы используете rowspan:

Теперь изображение-клетки имеют «слился» с ячейкой под ним, так что в основном становится одна единственная клетка. Ячейка рядом с ней, уже не наследует высоту, поэтому пространство под текстом исчезает.

Если вы по-прежнему имеете высоту 300 пикселей на ячейке изображения, браузер попытается поместить все содержимое из двух строк на этой высоте. Если это невозможно, таблица будет расширяться, чтобы соответствовать содержимому. Поэтому, если вы в первую очередь сделали изображение-ячейку 300px в высоту, чтобы изображение могло соответствовать этой высоте, я бы вместо этого сделал сам образ высоты.

Если вы хотите, чтобы текст и изображения выравнивались сверху, вы можете использовать valign="top" для всех ячеек.

Я бы порекомендовал вам сделать весь стиль в отдельном CSS-файле, а не в инт.

Working Fiddle