텍스트 사이의 공간을 줄이려면 어떻게해야합니까?

Question

나는 Anki 프로그램을 사용하고 'Meaning', 'Example', 'Meaning2'와 'Example2'사이의 공간을 줄이고 싶습니다.

Image here shows what I mean

내 코드는 : 당신이 이미지가 포함 된 셀에 300 픽셀의 높이를 정의하기 때문에

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

Answer 1

행 사이의 여분의 공간입니다. 테이블이기 때문에 다음 셀은 300px의 높이를 상속합니다.

이를 방지하려면 이미지 셀을 두 행으로 확장해야합니다. 이미지 셀에 rowspan="2"을 추가하고 두 번째 행에서 빈 셀을 제거하면됩니다.

그런 다음 이미지 셀 대신 높이 300px로 이미지를 만드는 것도 고려해야합니다. 그렇지 않으면 원치 않는 결과로 끝날 수 있습니다. 여기

---

내가 코드의 그림 만든 :

당신이, 그 자체 수있는 이미지 셀은 셀 옆에 300 픽셀의 높이가있는 경우, 동일한 행에있는 셀은 에 여러 개의 높이가 없기 때문에이 또한 가질 것입니다. 그렇기 때문에 두 번째 셀에 텍스트가 매우 많아서 텍스트가 있습니다. 여기

, 당신이 rowspan를 사용하는 경우 : 그것은 기본적으로 하나 개의 세포가된다 있도록

지금 이미지 셀이 가지고는, 그 아래에있는 셀과 "병합". 옆에있는 셀 (더 이상 )은 높이를 상속하지 않으므로 텍스트 아래 공간이 사라집니다.

이미지 셀에 여전히 300px 높이가있는 경우 브라우저는 해당 높이의 두 행에있는 모든 콘텐츠를 맞추려고합니다. 그럴 수 없다면 테이블은 내용에 맞게 확장됩니다. 그래서 처음에 높이가 300px 인 이미지 셀을 만들어 이미지가 그 높이에 맞춰지면 대신 이미지 자체를 높이로 만들 것입니다.

텍스트와 이미지를 맨 위에 정렬하려면 모든 셀에 valign="top"을 사용할 수 있습니다.

여전히 모든 스타일을 별도의 CSS 파일로 처리하고 인라인하지 않는 것이 좋습니다.

Working Fiddle