박스모델 1편 소개
박스
- 요소가 차지하고 있는 사각형의 영역
- 콘텐츠 영역 (width, height)
- 안쪽 여백 (padding)
- 경계선 (margin)
- 바깥쪽 여백 (border-width)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스 모델 1</title>
<style>
div{
border: 3px dashed gray;
padding: 10px;
margin: 20px;
width: 110px;
height: 35px;
}
span{
width: 100px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div>요소의 콘텐츠</div>
<span>다른 콘텐츠</span>
</body>
</html>
ISTJ의 재미없는 velog