box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.
테두리나 패딩이 있다면 이것을 고려하여 크기를 설정하여야 합니다.
그럴 때 box-sizing 속성을 사용합니다.
content-box와 border-box가 있다.
content-box는 CSS 표준이 정의한 초기 기본 값이고 width와 height 속성이 콘텐츠 영역만 포함하고 콘텐츠 영역에 테두리와 패딩이 포함되지 않는다. 그러나 border-box의 경우 패딩과 테두리를 추가되면 콘텐츠 영역이 줄어든다 그러나 마진은 포함하지 않는다..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing -->
<style>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
</style>
</head>
<body>
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
</body>
</html>위의 코드는 MDN 예제이다.
https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
box-sizing - CSS: Cascading Style Sheets | MDN
box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.
developer.mozilla.org
주석을 보면 이와 같이 나오는 이유를 자세히 알 수 있다.
'이것 저것 공부 > CSS' 카테고리의 다른 글
| 요소의 가운데 정렬 (0) | 2021.09.01 |
|---|---|
| Position Sticky VS Fixed (0) | 2021.08.31 |
| Position Relative vs Absolute (0) | 2021.08.31 |
