*inline-block 요소에서 width: auto와 height: auto는 내용물(content)의 크기에 맞게 자동 크기 조절의 의미를 가집니다. 하지만 block 요소 에서는 내용물(content)에 맞게 크기가 자동 조절되지 않음을 볼 수 있습니다.*
참고로 inline 요소를 고려하지 않는 이유는, inline 요소의 경우에는 크기 속성(width, height)을 설정할 수 없기 때문입니다.
*inline-block 요소에서의 auto 의미는 자식 요소들 크기에 자동으로 맞춤하라는 것입니다.*
여기서 크기란 자식요소의 margin + border + padding + width 또는 height를 의미합니다.
inline-block / auto
inline-block의 width: auto는 자식 요소의 크기를 기준으로 너비를 설정하는 반면, width: 100%는 부모 요소의 크기를 기준으로 너비를 설정합니다.
그렇다면 부모 요소(inline-block)에 width: auto를 설정하고, 자식 요소에 width: 100%를 설정하면 어떻게 될까요?
서로의 크기를 기준으로 잡기 때문에, 약간의 딜레마 같은 문제가 발생할 수 있습니다.
P: auto / C: 100%
block 요소는 inline 요소와 다르게 작동하는데, width: auto와 height: auto를 분리해서 생각해야 합니다. block 요소의 height: auto는 inline-block과 마찬가지로 자식 요소 크기를 기준으로 설정하지만, width: auto의 경우에는 부모 요소 크기를 기준으로 설정합니다.
*width: auto의 경우, 부모 요소의 크기를 기준으로 설정되기 때문에 width: 100%로 설정된다고 생각하실 수도 있는데, 사실을 잘못된 생각입니다. 정확히 말해서는 width = 100% - margin(좌/우) 으로 설정됩니다.*