html - How can I reduce the space between the texts? -

i use anki program , reduce space between 'meaning', 'example', 'meaning2' , 'example2'.

image here shows mean

and code:

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

the space between rows, because have defined height of 300px in cell contains image. since it's table, next cell inherit height of 300px.

to avoid that, need make image-cell span 2 rows. adding rowspan="2" image-cell, , remove empty cell on second row.

then should consider making image 300px in height instead of image-cell. else end unwanted result.

---

here have made illustration of code:

as can se, when image-cell, has height of 300px cell next it, have it, because cells in same row cannot have multiple heights. that's why there space below text in second cell.

and here, if use rowspan:

now image-cell have "merged" cell below it, becomes 1 single cell. cell next it, no longer inherits height, space below text disappears.

if still have height of 300px on image-cell, browser try fit content 2 rows, in height. if that's not possible, table expand fit content. if in first place made image-cell 300px in height image fit height, instead make image height.

if want text , images align on top, can use valign="top" on of cells.

i still recommend style in separate css-file , not inlined.

working fiddle