라인의 높이를 지정합니다.

화면상에서 확인하기 쉽게 문단에 배경이미지를 적용해 보겠습니다.

<p style="line-height: 10px; background-color:gray;">라인의 높이를 10픽셀로 지정</p> <p style="line-height: 30px; background-color:gray;">라인의 높이를 30픽셀로 지정</p>

라인의 높이를 10픽셀로 지정 라인의 높이를 30픽셀로 지정

그러나 라인의 높이라기 보다는 줄간격으로 해석하는게 좋습니다. 배경색을 지정하지 않는 경우 leight-height를 10픽셀로 지정하는건 별 의미가 없습니다.

한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋습니다. 아래 예제는 줄사이의 간격을 확인하기 위해서 문단의 width를 200픽셀로 좁게 만들어 보았습니다.

<p style="width:200 ;">라인의 높이라기 보다는 라인사이의 간격으로 보는것이 좋습니다. 배경색을 지정하지 않은경우 텍스트보다 line-height를 적게 잡는다고 해도(10픽셀) 화면상에는 아무런 변화를 느끼지 못합니다. 그리고 line-height는 %를 단위로 해서 잡는것이 좋습니다.</p> <p style="width:200 ; line-height:140%;">이 문단은 line-height 속성값으로 140%를 지정하였습니다. 이렇게 하면 줄 사이의 간격이 어느정도 떨어지기에 가독성이 좋아집니다. 한글의 경우 일반적으로 130%~160%정도로 해서 줄 사이의 간격을 늘리는것이 좋습니다.</p>

아래의 문단은 leight-height를 140%로 지정하였습니다. 위의 문단과 비교해서 줄 사이의 간격이 넓으므로 가독성에 도움이 된다는 사실을 알 수 있습니다.

라인의 높이라기 보다는 라인사이의 간격으로 보는것이 좋습니다. 배경색을 지정하지 않은경우 텍스트보다 line-height를 적게 잡는다고 해도(10픽셀) 화면상에는 아무런 변화를 느끼지 못합니다. 그리고 line-height는 %를 단위로 해서 잡는것이 좋습니다. 이 문단은 line-height 속성값으로 140%를 지정하였습니다. 이렇게 하면 줄 사이의 간격이 어느정도 떨어지기에 가독성이 좋아집니다. 한글의 경우 일반적으로 130%~160%정도로 해서 줄 사이의 간격을 늘리는것이 좋습니다.