Css 깊이있게_2 inherit(상속)에 대해서

다른 분들이 포스팅을 안 한 것을 찾던 중에 상속에 대해서는 글 들이 많이 없는 것 같아서 이렇게 정리합니다.

w3schools에서 font-size랑 margin을 검색하면 다음과 같이 나옵니다.

font-size는 inherited가 yes 이고 margin은  inherited가 no 인데요, 이 차이에 대해서 설명 하겠습니다.

먼저 다음과 같이 코딩을 하고 crome 브라우저 요소 검사 화면을 확인 하면 다음과 같이 나오는데요.

.parent_element DIV 에 font-size:24px을 주었는데요, 화면을 확인 해보니 .parent_element DIV  안에 있는 div, p, span 태그에 있는tex도 font-size 가 24px로 바뀐것을 확인 할 수 있습니다.

요소검사 창 우측에 보면 inherited from div.parent_element 부분이 보이시죠. 

부모 엘리먼트에 스타일을 주면 부모 엘리먼트 안에 있는 엘리먼트들도 부모와 같은 스타일을 적용되는 이 상태가 inherit(상속) 이라고 이해를 하시면 될 것 같습니다. ( 참고 :  https://www.w3schools.com/cssref/css_inherit.asp)

이렇게 font-size 처럼 Default 로 inherit이 되는 property들이 있는대요,

일일이 다 조사 하는데 시간이 많이 들어서 제가 참고한 사이트(https://www.impressivewebs.com/inherit-value-css/)를 보면 다음과 같이 있다고 합니다. 알아두면 좋을 것 같습니다.

( ※ margin은 inherit이 no 이니간 .parent_element DIV 만 margin이 적용 됩니다. )

Element
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-weight
font-style
font-variant
font
letter-spacing
list-style-type
list-style-position
list-style-image
list-style
line-height
orphans
page-break-inside
quotes
text-align
text-indent
text-transform
visibility
white-space
widows
word-spacing