줄 간격(line-height) 상속

line-height Inheritance

이 글에서는 line-height 에 대해 알아보도록 합니다.

줄 간격에는 단위를 사용할 수 있지만 일반적으로 단위를 사용하지 않는 것이 좋습니다.

그 이유는 1.2em 이나 120% 와 같이 단위 있는 값을 사용하게 되면 계산 결과를 자손 요소까지 상속하게 되기 때문입니다.

이러한 차이점에 대해 알아보도록 하겠습니다.

단위 없는 줄 간격(line-height)을 사용하자

위에서 언급했듯이 단위를 가진 줄 간격은 자식요소까지 상속된다고 했습니다.

아래의 마크업과 CSS 를 살펴보도록 합니다.

html

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>consectetur adipisicing elit. <span>Odit, porro!</span></li>
</ul>

css

ul {
    font-size: 15px; line-height: 1em;
}
li {
    font-size: 10px;
}
span {
    font-size: 80%;
}

ul 요소의 줄 간격은 15px 로 계산되어 집니다.

줄 간격을 계산할 때는 em 단위, % 단위와 마찬가지로 요소 자신의 font-size 를 기준으로 계산하게 됩니다.

ul 요소에 폰트사이즈 15px 을 선언했으므로 15 * 1em = 15px 로 계산됩니다.

여기서 중요한 점은 계산된 값인 15px 이 자손 요소로 상속된다는 점입니다.

즉, li 요소와 span 요소가 15px 이라는 줄 간격을 상속받습니다.

li 요소와 span 요소는 자신의 글씨 크기를 기준으로 줄 간격을 다시 계산하지 않습니다.

부모의 값 15px 의 값을 상속받고 그것을 그대로 사용하게 됩니다.

다음과 같이 선언된 것처럼 상속될 것입니다.

css

 ul {
    font-size: 15px; line-height: 1em;
}
li {
    font-size: 10px;; line-height: 15px;
}
span {
    font-size: 80%;
    line-height: 15px;
}

물론 li 요소에 명시적으로 line-height 다른 값을 부여하면 재선언되겠지만 사용자 의도에 따라 불필요할 수 있습니다.

참고로 위 CSS에서 line-height 의 다른 값을 적용하게 하려면 span 요소를 인라인블록 요소로 바꾸어 주어야 합니다.

이제 줄 간격 값에서 em 단위를 제거하고 단위없는 정수로만 사용한다고 가정해 봅니다.

css

ul {
    font-size: 15px; line-height: 1;
}
li {
    font-size: 10px;
}
span {
    font-size: 80%;
}

위와 같이 단위없는 줄 간격을 선언하게 되면 이제 li 요소와 span 요소로 그 숫자가 전달되게 됩니다.

그럼 자손 요소에서 전달받은 숫자를 곱해서 줄 간격을 계산하게 되며, UL 요소에서 계산한 줄 간격은 상속받지 않습니다.

다시 말해, 1이란 숫자를 전달받은 모든 요소에서 자신의 font-size 에 1을 곱해서 줄 간격으로 사용하게 됩니다.

li 요소의 font-size 는 10px 이므로 줄 간격도 10px이 되고, span 요소도 font-size 8px 에 1을 곱해서 8px 의 줄 간격이 사용되게 될 것입니다.

li 요소의 font-size 가 10px 이므로 자식 요소인 font-size 가 80%이르로 10px 의 80% 로 font-size 는 8px 입니다.

위에서 선언한 line-height: 1; 로 인해 CSS 는 다음과 같은 값을 지니게 될 것입니다.

css

ul {
    font-size: 15px; line-height: 1;
}
li {
    font-size: 10px;
    line-height: 10px;
}
span {
    font-size: 80%;
    line-height: 8px;
}

이러한 이유 때문에 html 요소나 body 요소, 혹은 자손 요소가 있는 모든 요소에 줄 간격을 단위 없이 숫자만 사용하는 것이 많은 이점을 가져올 수 있습니다.

Jaehee's WebClub

Web Club