왜 "display: block" 및 "width: auto"가 버튼을 늘려 컨테이너를 채우지 않습니까?

"display: block" 및 " width: auto"를 버튼에 추가하면 해당 컨테이너가 늘어나고 채워질 것으로 예상될 수 있습니다. 그러나 항상 그런 것은 아닙니다. 특히 최신 브라우저의 버튼은 이 점에서 다른 블록 요소와 다르게 동작합니다.

이 동작의 이유는 버튼이 대체 요소라는 특성에 있습니다. 대체 요소는 모양과 크기가 주로 CSS에 의해 결정되는 것이 아니라 운영 체제나 기타 외부 리소스와 같은 외부 요인에 의해 결정되는 요소입니다. 버튼의 경우 크기와 스타일은 플랫폼별 사용자 인터페이스 규칙에 따라 정의되는 경우가 많습니다.

기본 크기

대체된 요소는 고유한 크기를 갖습니다. 너비와 높이는 주변 콘텐츠가 아닌 요소 자체에 의해 정의됩니다. 교체된 요소에 "width: auto"를 적용하면 해당 요소의 고유 너비가 사용됩니다. 버튼의 경우 이 고유 너비는 일반적으로 운영 체제에서 정의한 기본 버튼 컨트롤의 크기에 해당합니다.

시각적 서식 요구 사항

고유 치수 외에도 요소에는 시각적 형식 요구 사항이 적용될 수도 있습니다. 버튼의 경우 이러한 요구 사항에는 캡션 표시, 버튼 테두리 및 기타 사용자 인터페이스 요소가 포함됩니다. 이러한 형식 요구 사항은 "width: auto" 및 "display: block"과 같은 CSS 속성의 효과를 재정의합니다.

결론

"와 관련된 버튼의 동작 display: block" 및 "width: auto"는 교체된 요소로서의 상태에 따른 결과입니다. 본질적인 크기와 시각적 서식 요구 사항은 CSS 속성보다 우선하므로 버튼이 컨테이너를 채우기 위해 늘 늘어나지 않는 현상이 관찰됩니다.