w-auto와 h-auto는 어떻게 결정되나요?

Question

w-auto는 w-100과 같아서 부모 요소의 가로를 전부 차지하지만, h-auto은 부모의 높이와 전혀 관계없는듯 보입니다. 원리를 모르니 가르쳐 주시면 감사하겠습니다. 가로와 세로의 auto는 어떻게 결정되는지 궁금합니다.

Answer

거의 비슷한 개념입니다.

다만 w-auto 클래스(즉, width: auto;)는 margin이나 padding 그리고 border를 포함하지 않구요,

w-100 클래스는(width: 100%;)는 포함되는 개념입니다.

이 두 개가 거의 같이 사용해도 별 차이가 없는 이유는

부트스트랩 css에 reset 개념으로

box-sizing: border-box; 클래스가 포함되어 있기 때문입니다.

디테일한 부분은 stackoverflow 아래 링크를 참조해주세요.

https://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent