티스토리 뷰

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/12   »
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
글 보관함