CSS에서 margin 속성에 inherit 값을 사용하면, 해당 요소는 부모 요소의 여백(margin) 값을 그대로 물려받게 됩니다. 기본적으로 margin 속성은 상속되지 않지만, margin: inherit;을 지정하면 부모 요소와 동일한 여백을 자식 요소에 적용할 수 있습니다.
margin: inherit의 동작 원리
일반적으로 CSS의 대부분 박스 모델 속성(margin, padding, border 등)은 자식 요소로 상속되지 않습니다. 하지만 inherit 키워드를 명시적으로 사용하면, 부모 요소의 계산된(computed) margin 값을 강제로 상속받을 수 있습니다. 예를 들어, 부모 div에 왼쪽 여백이 50px로 설정되어 있다면, 자식 p 요소에 margin-left: inherit;를 적용하는 순간 동일하게 50px의 왼쪽 여백이 적용됩니다.
예제 코드
아래 코드는 부모 요소(div)의 왼쪽 여백을 자식 요소(p)가 상속받는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
margin-left: 50px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<p>부모 요소로부터 왼쪽 여백을 상속받는 예제</p>
<div>
<p class = "ex1">상속된 왼쪽 여백이 적용된 데모 텍스트입니다.</p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 파란색 테두리가 있는 div 요소가 왼쪽으로 50px 밀려 있고, 그 안의 p.ex1 요소 역시 부모로부터 왼쪽 여백 50px을 상속받아 같은 위치에 정렬되는 것을 확인할 수 있습니다.
정리
margin: inherit;은 부모와 자식 요소의 여백을 일관되게 유지해야 할 때 유용합니다. 다만 실무에서는 레이아웃 복잡도를 줄이기 위해 상속보다 명시적인 값이나 CSS 변수(custom properties)를 활용하는 경우가 많으므로, 상황에 맞게 선택하여 사용하는 것이 좋습니다.