box-sizing 속성의 기본값은 content-box
box-sizing 을 border-box로 지정하면 테두리까지 너비와 높이에 포함
유노코딩의 대댓글
box-sizing 은 요소가 정해진 width 보다 커질수 있는가(content-box)
그렇지 않은가(border-box) 로 이해하시는 게 가장 쉬운 것 같습니다!
border-box
테두리까지 너비,높이가 100px
크기가 좀 더 커져도 괜찮으니 콘텐츠 크기는 확보하는걸로 하려면
content-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여백 지정해보기</title>
<style>
div{
box-sizing: content-box;
width: 100px; height: 100px;
border: 5px solid tomato;
padding: 30px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
'프론트엔드 > css' 카테고리의 다른 글
| [유노코딩 css 11강] float,clear 컨테이너 배치, p태그들 clear하기 (0) | 2023.08.03 |
|---|---|
| [유노코드 css 10강] 백그라운드 하위 속성 그림,이미지 넣기,위치,정 (0) | 2023.08.03 |
| [유노코딩 css 8강] padding과 margin (0) | 2023.08.02 |
| [유노코딩 css 7강] 박스 (0) | 2023.08.02 |
| [유노코딩 css 6강] div,span의 블록,인라인 여부, border의 하위속성 (0) | 2023.08.02 |
