inline 요소들 , table rows , row groups (thead,tfoot,tbody) 은 width, height를 가질 수 없는 반면에 (글자의 길이와 높이에 따라서 자동으로 지정됨),

block과 inline-block 요소들은 width, height를 가질 수 있다.

즉, 해당 요소의 컨텐츠 영역의 너비와 높이를 직접 지정할 수 있는 것이다

<aside> 💡 width , height는 자동 상속되는 속성이 아닙니다.

</aside>

속성 값으로는

• auto - 디폴트값
• 길이값 - px cm in em 등..
• % - 부모 요소에 상대적인 너비 (부모요소가 500px일 때 50%라면 250px)
• initial - 기본값으로 초기화
• inherit - 부모 요소로부터 상속받음 (이걸 사용하면 부모요소로 부터 상속받을 수 있음)

❗블록 요소로 인한 width 100%

    <div class="container">
      <div class="content"></div>
    </div>

.container {
  width: 400px;
  height: 100px;
  background-color: blue;
}

.content {
  height: 100px;
  background-color: gray;
}