どのようにテキスト間のスペースを減らすことができますか？

Question

私はAnkiプログラムを使用しています。私は 'Meaning'、 'Example'、 'Meaning2'、 'Example2'の間のスペースを減らしたいと思います。

Image here shows what I mean

と私のコード：

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

Answer 1

行の間に余分なスペースは、イメージを含むセルに300ピクセルの高さを定義しているので、あります。テーブルなので、次のセルは300pxの高さを継承します。

これを回避するには、イメージセルを2行にまたがるようにする必要があります。これを行うには、rowspan="2"をimage-cellに追加し、2番目の行の空のセルを削除します。

また、画像セルの代わりに高さ300pxの画像を作成することも検討してください。そうでなければ、望ましくない結果に終わる可能性があります。ここで

---

私はあなたのコードのイラスト作った：

をあなたは、SEができるように画像セルは、セル 横に300ピクセルの高さを有している場合には、同じ行の細胞は に複数の高さを持つことができないので、それも持っています。そのため、2番目のセルにはテキストの下に余分なスペースがあります。ここ

そして、あなたはrowspanを使用する場合：それは基本的に1つのセルになり よう

今すぐ画像セルは持っているが、その下のセルに「合併しました」。その隣のセルは、もはや が高さを継承しないので、テキストの下のスペースは消えます。

イメージセルにまだ300pxの高さがある場合、ブラウザはその高さで2行のすべてのコンテンツを収めようとします。それが不可能な場合は、コンテンツに合わせてテーブルが展開されます。だから、まず画像セルを高さ300pxにして画像をその高さに合わせると、画像そのものが高さになります。

テキストと画像を一番上に並べる場合は、すべてのセルでvalign="top"を使用できます。

インラインではなく、別のCSSファイルですべてのスタイルを実行することをお勧めします。