box-sizing

Bonnie Ryu·2020년 10월 20일
0
post-thumbnail

box-sizing - 박스 너비 기준 정하기


🟠 웹 문서에 여러 요소를 배치할 때 각 요소이 너비를 계산해야 한다.
CSS의 컨텐츠 영역의 너비를 나타내는 width속성은 해당요소에 적용된 패딩이나 테두리 크기는 따로 계산해서 배치해야 했다.


🟠 box-sizing속성을 사요아면 컨텐츠 영역의 너비에 패딩/테두리 크기까지 합쳐서 width속성을 지정할 수 있다.

▪️ box-sizing : content-box : width속성 값을 컨텐츠 영역 너비값으로 사용(기본값)
▪️ box-sizing : border-box : width속성 값을 컨텐츠 영역에 테두리까지 포함된 박스 모델 전체 너비 값으로 사용


📍주의!
박스모델의 마진(`margin`)속성은 포함되지 않는다.
profile
Ryuwisdom

0개의 댓글