inherit

inherit은
부모 요소의 계산된 속성 값을 나타내는 CSS의 키워드입니다.

이 키워드는 부모 요소에 적용된 스타일을 그대로 이어받아 사용하고 싶을 때 적용합니다.

영어 단어 inherit은 "상속받다" 또는 "물려받다"라는 뜻을 가지고 있습니다.
CSS에서 inherit 키워드는 부모 요소로부터 브라우저에 의해 계산된 해당 속성의 값을 상속받는 의미로 사용됩니다.

예제

HTML 
<h2>h2 제목 요소입니다.</h2>
<p>article p 요소입니다.</p>

<article>
    <h2>article h2 제목 요소입니다.</h2>
    <p>article p 요소입니다.</p>
</article>
CSS 
h2 {
    font-size: 25px;
    color: red;
}
p {
    font-size: 20px;
}

article {
    font-size: 12px; /* article의 기본 글꼴 크기 */
    border: 1px solid blue;
}
article h2 {
    font-size: inherit; /* 부모 요소인 article의 font-size: 12px;를 적용 */
}

코드 부연설명
font-size 속성은 글자(폰트)의 크기를 지정합니다.

실제 적용된 모습

설명

이 예제에서 article 요소의 글꼴 크기는 12px로 설정되어 있습니다. article h2 요소는 font-size: inherit;를 사용하여 부모 요소인 article의 글꼴 크기를 상속받습니다. 따라서, "article h2 제목 요소입니다."의 글꼴 크기는 12px이 됩니다.

주의할 점

inherit 키워드 값을 사용할 때에는 다음의 두 가지를 주의해야 합니다.

단축 속성에서 사용 시

inherit 키워드 값을 사용 할 때 margin, border, background 같은 단축 속성(shorthand property)에서는 전체 값을 inherit으로 지정할 수는 있으나, 단축 속성의 개별 값으로 지정할 수는 없습니다.

CSS 
div {
    margin: inherit 0; /* 오류 발생 */
}
article {
    border: 3px solid inherit; /* 오류 발생 */
}
CSS 
div {
    margin: inherit; /* 단축 속성의 전체 값에는 사용할 수 있음 */
}
article {
    border-width: 3px;
    border-style: solid;
    border-color: inherit;
}

부모 요소의 계산된 속성 값 이해

inherit 키워드는 부모 요소로부터 브라우저에 의해 계산된 해당 속성의 값을 상속받는 의미입니다.

CSS로 부모 요소에 지정한 해당 속성 값과 브라우저에 의해 계산된 해당 속성의 값은 달라질 수 있습니다. 대표적으로 부모 요소가 em이나 % 단위로 값을 설정할 경우, 상속된 값은 자식 요소에서도 해당 단위 기준으로 계산되어 적용됩니다. 이는 예상치 못한 결과를 초래할 수 있으므로 주의가 필요합니다.

CSS 
.parent {
    font-size: 16px;
    padding: 2em; /* 2em은 이 요소의 font-size인 16px의 2배인 32px로 계산됨 */
}

.child {
    font-size: 13px;
    padding: inherit; /* 부모의 padding을 상속받아 16px의 2배인 32px로 계산됨
                         2em이 아님 */
}

위 예제에서 사용한 em 단위에 대한 자세한 설명은 CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

브라우저 호환성

inherit 키워드의 브라우저 호환성
키워드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
inherit 1 12 1 1

명세서

inherit 키워드의 명세서 사양
명세서 사양
inherit CSS Cascading and Inheritance Level 4
#inherit

참고문헌

같이 보기