웹 브라우저에 표시되는 텍스트는 다음과 같이 구성됩니다.
그림 6-15 텍스트 상세
우리가 알고 있는 font-size 속성은 말 그대로 글자 자체의 크기를 지정합니다. 그러나 모든 텍스트는 웹 브라우저에 표시될 때 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있습니다. 그리고 이러한 여유 공간을 전부 포함한 글줄 사이의 간격을 행간이라고 하며 line-height 속성으로 제어할 수 있습니다.
다음 예제처럼 line-height가 font-size보다 작으면 윗줄과 아랫줄의 텍스트가 겹쳐 보이면서 가독성이 떨어질 수 있으므로 line-height는 속성값을 항상 font-size보다 크게 지정하는 편이 좋습니다.
06/02/line-height.html
<style>
p{
line-height:10px; /* 텍스트 크기(16px)보다 작게 지정 */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti sunt inventore distinctio earum quod ea labore nisi accusamus commodi repellat nihil ullam ad in hic, laboriosam incidunt minima eius.</p>
</body>
그림 6-16 실행결과