왜div의 충전은 다른 요소에 영향을 줍니까?
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added - MDN
이러한 행위를 처리하기 위해서 우리는
box-sizing
속성을 사용하고 모든 요소를 border-box
로 설정합니다.다음과 같이 하십시오.* {
box-sizing: border-box;
}
border-box
tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. - MDN
이것은 처리 요소의 크기를 더욱 쉽게 하고, 통상적으로 내용을 배치할 때 발생할 수 있는 함정을 제거한다.
상자 크기 조정 결과: 테두리 상자;더 좋은 것은 많은 개발자들이 페이지의 모든 요소가 이런 방식으로 일하기를 바란다는 것이다.
많은 브라우저들이 상자 크기를 사용했습니다: 테두리 상자;많은 폼 요소 (전부는 아니지만, 이것이 바로 입력과 텍스트 영역이 너비에서 다르게 보이는 이유입니다: 100%
Reference
이 문제에 관하여(왜div의 충전은 다른 요소에 영향을 줍니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/adityapatnaik/why-does-padding-in-a-div-affects-other-elements-3na2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)