1.padding-top 위쪽 바깥 여백
2.padding-right 오른쪽 바깥 여백
3.padding-bottom 아래쪽 바깥 여백
4.padding-left 왼쪽 바깥 여백
contents-box : width를 Box Model 기준 content 영역만의 width로 설정하는 뜻 <- 지정안해줘도 모든것은 contents-box
border-box : width를 Box Model 기준 padding과 border의 영역까지 포함하여 설정하는 뜻 <- 따로 border-box 지정해야함
예시)
<style>
div{
width: 100px;
height: 100px;
}
#div1{
background-color: aqua;
padding: 50px;
/* html 요소의 크기 변경!! */
}
#div2{
background-color: cornsilk;
padding: 10px;
margin: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">승호</div>
<div id="div2">민수</div>
</body>div1은 content-box라서 padding의 영향을 받아 200의 길이로 변하게 되고 => 100+ (왼쪽 50, 오른쪽50)
div2는 border-box라서 padding의 영향을 안받고 margin의 영향으로 방향이 바뀐다.
