[CSS] box-sizing : 박스 크기 방식 설정

box-sizing

box-sizing이란

박스 모델의 너비와 높이를 계산하는 방식을 변경하는 속성

box-sizing 사용 이유

width와 height는 기본적으로 컨텐츠 박스 크기에만 적용된다.
따라서 테두리(border) 또는 안쪽 여백(padding)이 있는 경우에는 컨텐츠의 크기 + @로 테두리나 안쪽 여백을 고려해야 하기 때문에 어려움을 느낀다.
여기서 box-sizing의 value를 border-box로 지정하면 width와 height를 테두리, 여백을 포함한 크기로 지정할 수 있다.

box-sizing values / box-sizing 속성 값

content-box

CSS 표준의 정의한 초기 기본값으로 width와 height 속성이 컨텐츠 영역만 포함한다.

selector {
    box-sizing: content-box;
}

border-box

width와 height 속성이 border와 padding의 크기를 포함하고, 바깥 여백(margin)은 포함하지 않는다.

selector {
    box-sizing: border-box;
}

content-box와 border-box 차이

동일한 너비와 높이 값으로 box-sizing만 차이를 두어 생성했을 때 결과는 다음과 같다.
결과에서도 알 수 있듯이 둘의 차이점은 내가 설정한 크기를 content만의 기준으로 할 것인가 border~content까지 포함하여 기준으로 둘 것인가이다.
(과연 어느 쪽이 고려해야 할 점이 많을까 생각해보면 답은 정해져 있는 것 같다..)

<!DOCTYPE html>
<html lang="ko">
    <head>
        <style>
            div {
                width: 160px;
                height: 80px;
                padding: 20px;
                border: 8px solid red;
                background: yellow;
            }
            .content-box {
                box-sizing: content-box;
            }
            .border-box {
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="content-box">content-box</div>
        <br>
        <div class="border-box">border-box</div>
    </body>
</html>

참고

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN

box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

developer.mozilla.org

저작자표시

'WEB > HTML & CSS' 카테고리의 다른 글

[CSS] CSS 선택자 종류와 우선순위 (작성중) (0)	2022.06.28
[CSS] Flexbox : 자식 박스의 방향과 크기 설정 (0)	2022.06.28
[CSS] CSS란? (0)	2022.06.28
[HTML] 시멘틱 태그(Semantic Tag) (0)	2022.06.27
[HTML] HTML이란? (0)	2022.06.27