개발로그필름

[CSS] box-sizing : border-box 본문

IT/CSS

[CSS] box-sizing : border-box

yuullog 2024. 3. 12. 23:31
728x90
반응형
SMALL

box-sizing

요소의 전체 넓이와 높이를 계산하는 방법 설정

 

css box 모델에서 요소에 할당한 너비와 높이는 해당 요소 콘텐츠 상자에만 적용된다

요소가 padding이나 border을 가지고 있을 때 지정한 width, height 사이즈가 예상한것과 다른 경우가 생긴다

 

그래서 box-sizing을 border-box로 지정해서 boder를 기준으로 box 크기를 정해 코딩을 좀 더 수월하게 한다

 

box-sizing이 없을 때
<head>
    <style>
        div {
            margin: 10px;
            width: 150px;
        }

        #small {
            border: 10px solid black;
        }

        #large {
            border: 30px solid black;
        }
    </style>
</head>

<body>
    <div id="small">Hello</div>
    <div id="large">Hello</div>
</body>

box-sizing 설정 안했을 때

 

 

box-sizing : border-box 적용 후
* {
	box-sizing: border-box;
  }

반응형
LIST
저작자표시 비영리 변경금지

'IT > CSS' 카테고리의 다른 글

[CSS] calc()  (0) 2024.03.13
[CSS] margin: 0 auto;  (0) 2023.04.05
[CSS] 명시도 specificity 높은 선택자 고르는 방법  (0) 2023.03.31
[CSS] 가로 스크롤 하는 방법  (0) 2023.03.28
[CSS] 배경 이미지 위에 그라데이션 넣는 방법 (abckground-image, linear-gradient)  (0) 2023.03.28
'IT/CSS' Related Articles more
Comments