[CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들

[CSS.023]  상위요소로 부터 상속받지 않는 태그와 속성들

 

 

[1] button이나 input 태그는 상위 요소로부터 상속받지 않는다.

이런 태그들은 값을 상속 받게끔  inherit를 사용하면 된다.

 

(예)
button,input {
   color:inherit;
   font-family: inherit;
}

=> color 는 상속받는 속성이지만, button, input 태그 자체가 상속을 안 받기 때문에 color도 상속이 안됨.

 

[2]  padding , border 등은 상속하지 않는 속성이므로 부모 요소에서 속성을 정의해서 자식 요소에 적용되지 않는다.

 

다음은 상속 안되는 속성들이다.

width/height margin padding border box-sizing display background

vertical-align text-decoration position top/right/bottom/left z-index overflow float

 

다음은 상속 되는 속성들이다.

font-family font-size font-weight line-height visibility opcatity color

line-height text-align white-space list-style

 

* 상속이 되지 않는 프로퍼티라고 해서 꼭 상속을 받을 수 없는 것은 아닙니다. 
inherit을 쓰면 상속을 받을 수 있습니다. 'inherit'을 써주면 그 요소는 부모 요소로 부터 속성 값을 상속 받는다고 여겨집니다. margin: inherit 또는 padding: inherit 을 쓰면, 부모 요소의 마진이나 패딩을 상속 받을 수 있습니다.