728x90
CSS 박스 사이즈 관련 속성 box-sizing
CSS에서 박스의 크기를 지정하였는데도
원하는 크기로 안바뀌는 경우에는
css의 box-sizing 속성을 확인해볼 필요가 있다.
CSS Selector {
box-sizing : content-box; (기본값)
box-sizing : border-box;
}
box-sizing 속성을 content-box로 하면,
설정해놓은 사이즈는 padding, border 속성의 사이즈를
제외한 박스 자체의 사이즈로 설정이 된다.
즉, width 와 height 를 100px로 설정해 놓아도,
border : 5px; padding : 5px
으로 설정하게 되면, width 는 120px이 되는 것이다.
padding, border 의 설정 사이즈를 포함하여
원하는 박스의 사이즈로 설정하고 싶을때는
box-sizing 속성을 border-box로 하면 된다.
하단의 샘플예제를 참고하도록 하자
샘플 예제
HTML, CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.main {
display : flex;
flex-direction : column;
justify-content: center;
align-items : center;
height : 50vh;
width: 100%;
}
.item {
width: 100px;
height: 100px;
margin : 15px;
background : tomato;
}
.item:nth-child(1){
box-sizing : content-box;
border : 10px solid grey;
padding: 15px;
}
.item:nth-child(2){
box-sizing : border-box;
border : 10px solid grey;
padding: 15px;
}
</style>
</head>
<body>
<section class="main">
<div class="item"></div>
<div class="item"></div>
</section>
</body>
</html>
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] Background 속성 (0) | 2021.03.04 |
|---|---|
| [CSS] transform - Translate 수평, 수직 정렬 (0) | 2021.03.04 |
| [CSS] BEM (Block Element Modifier) 표기법 (0) | 2021.03.04 |
| [CSS] Transform 속성 span 태그에 적용하기 (0) | 2021.02.22 |
| [프론트엔드 CSS] 엘리먼트 내 스크롤바 생성 overflow-y (0) | 2021.02.20 |
댓글