티스토리 뷰

CSS

box-sizing

미짱~ 2023. 1. 23. 19:17

box-sizing 

box-sizing : 요소의 크기 계산 기준을 지정

  • content-box : 요소의 내용(content)으로 크기 계산 (기본값)
  • border-box 요소의 내용 + padding + border로 크기 계산  

코드펜 예제

See the Pen box-sizing by 김선미 (@tjsalsun) on CodePen.


TIL

key point

box-sizing 기본값은 content-box이다 

컨텐츠 포함해서 계산하기때문에 일일이 계산 하기보다는 border-box를 이용하기 
 
느낀점

box-sizing 사용은 유용해서 과제시나 프로젝트시 잘 사용할거 같다


오늘의 학습 만족도 
⭐⭐⭐⭐⭐

'CSS' 카테고리의 다른 글

display  (0) 2023.01.23
overflow  (0) 2023.01.23
border-radius  (0) 2023.01.23
border (테두리 선)  (0) 2023.01.23
padding (내부 여백)  (0) 2023.01.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함