박스모델 3편 box-sizing
box-sizing
- 요소의 크기에 경계선 크기와 padding이 포함
- box-sizing 속성 : 요소의 너비와 높이를 계산하는 방법을 지정
- content-box 속성값 : 너비와 높이가 콘텐츠 영역만을 포함 (Default)
- border-box 속성값 : 너비와 높이가 안쪽 여백과 테두리까지 포함
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스 모델 3</title>
<style>
div{
box-sizing: content-box;
width: 100px; height: 100px;
border: 5px solid darkgreen;
padding: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ISTJ의 재미없는 velog