如何减少文本之间的 space?
How can I reduce the space between the texts?
我使用 Anki 程序,我想减少 'Meaning'、'Example'、'Meaning2' 和 'Example2' 之间的 space。
Image here shows what I mean
和我的代码:
.card {
font-family: Arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
行之间额外的 space 是因为您在包含图像的单元格中定义了 300px 的高度。因为是table,所以下一个cell会继承300px的高度。
为避免这种情况,您需要使 image-cell 跨越两行。您可以通过将 rowspan="2"
添加到 image-cell 并删除第二行的空单元格来实现。
那么你也应该考虑将图像的高度设为 300px 而不是 image-cell。否则你可能会得到不想要的结果。
这里我把你的代码做了一个说明:
As you can se, when the image-cell, has an height of 300px the cell
next to it, will also have it, because cells in the same row cannot
have multiple heights. That's why there is so much space below the
text in the second cell.
在这里,如果你使用 rowspan
:
Now the image-cell have "merged" with the cell below it, so it
basically becomes one single cell. The cell next to it, no longer
inherits the height, so the space below the text disappears.
如果 image-cell 上的高度仍然为 300 像素,浏览器将尝试将两行中的所有内容放入该高度。如果那不可能,table 将展开以适应内容。因此,如果您首先将 image-cell 的高度设置为 300 像素,以便图像适合该高度,那么我会将图像本身设置为该高度。
如果您希望文本和图像在顶部对齐,您可以在所有单元格上使用 valign="top"
。
我仍然建议您在单独的 CSS-file 中完成所有样式,而不是内联。
我使用 Anki 程序,我想减少 'Meaning'、'Example'、'Meaning2' 和 'Example2' 之间的 space。
Image here shows what I mean
和我的代码:
.card {
font-family: Arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
行之间额外的 space 是因为您在包含图像的单元格中定义了 300px 的高度。因为是table,所以下一个cell会继承300px的高度。
为避免这种情况,您需要使 image-cell 跨越两行。您可以通过将 rowspan="2"
添加到 image-cell 并删除第二行的空单元格来实现。
那么你也应该考虑将图像的高度设为 300px 而不是 image-cell。否则你可能会得到不想要的结果。
这里我把你的代码做了一个说明:
As you can se, when the image-cell, has an height of 300px the cell next to it, will also have it, because cells in the same row cannot have multiple heights. That's why there is so much space below the text in the second cell.
在这里,如果你使用 rowspan
:
Now the image-cell have "merged" with the cell below it, so it basically becomes one single cell. The cell next to it, no longer inherits the height, so the space below the text disappears.
如果 image-cell 上的高度仍然为 300 像素,浏览器将尝试将两行中的所有内容放入该高度。如果那不可能,table 将展开以适应内容。因此,如果您首先将 image-cell 的高度设置为 300 像素,以便图像适合该高度,那么我会将图像本身设置为该高度。
如果您希望文本和图像在顶部对齐,您可以在所有单元格上使用 valign="top"
。
我仍然建议您在单独的 CSS-file 中完成所有样式,而不是内联。