왜 버튼이 `display: block` 및 `width: auto`로 컨테이너를 채우도록 확장되지 않습니까?

왜 "display: block" 및 "width: auto" 버튼을 확장하여 컨테이너를 채우지 않습니까?

HTML에서, 버튼, 입력, 선택 및 이미지와 같은 특정 요소는 "대체 요소"로 지정됩니다. 이러한 요소에는 운영 체제나 플러그인과 같은 외부 리소스에 의해 결정되는 고유한 크기와 모양이 있습니다.

버튼에 "display: block"을 적용하면 버튼이 블록 수준 요소처럼 작동해야 함을 나타냅니다. 컨테이너의 전체 너비를 차지합니다. 그러나 "width: auto"는 버튼의 고유 너비를 사용해야 함을 지정합니다.

대체된 요소는 고유 크기를 가지고 있습니다. 즉, 너비와 높이가 고정되어 CSS로 수정할 수 없습니다. 예를 들어 이미지 요소의 고유 크기는 이미지 파일의 크기에 따라 결정됩니다. 대체된 요소에 "width: auto"가 적용되면 브라우저는 고유한 너비를 따릅니다.

또한 대체된 요소에는 CSS 스타일을 재정의하는 브라우저나 운영 체제에서 부과하는 시각적 서식 요구 사항이 있을 수 있습니다. 예를 들어 버튼에는 CSS로만 수정할 수 없는 사용자 인터페이스 컨트롤이 내장되어 있습니다.

버튼의 경우 W3C에서 대체 요소로 공식적으로 정의하지는 않았지만 유사한 동작을 나타냅니다. 따라서 "display: block; width: auto;"를 적용합니다. 버튼의 본질적인 너비는 버튼의 시각적 형식 요구 사항에 따라 제한되기 때문에 버튼을 늘려 컨테이너를 채울 수는 없습니다.

위 내용은 왜 버튼이 `display: block` 및 `width: auto`로 컨테이너를 채우도록 확장되지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!