step15. box-sizing
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 10px solid red;
padding: 10px;
margin: 10px;
/*
content-box (default) | border-box
content-box : width 와 height 에 아무것도 포함하지 않음
border-box : width 와 height 에 padding 과 border 포함
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>box-sigzing 속성</h1>
<div class="box">.box</div>
</body>
- box-sizing 속성의 default 값은 content-box 이다. width와 height에 아무것도 포함하지 않는다. 지정한 content 그 자체의 크기로 설정된다.
- box-sizing 속성이 border-box라면 width와 height에 padding과 border를 포함한다. 이렇게된다면 width 계산이 조금 더 간단해질 수 있다. 하지만 의도한 것보다 content의 크기가 조금 작아질 수 있다는 것을 생각한다.
댓글