width : 100px;
height: 100px;
background-color: red;

padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

ex1) 일반적인 테두리
border: 굵기(1px) 스타일(solid) 색상 #000

테두리 선택도 가능
boder-top : 1px solid #000;

ex2) 테두리 없음
border: none

ex3) 둥근 테두리
border-radius: 10px
border-radius: 50%

테두리 선택 가능
border-top-left-radius: 50%
border-bottom-right-radius: 50%

margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;

padding : top right bottom left; (시계 방향)

[속기형]
padding : 10px 40px 20px 30px;

margin-top: 50px;
margin-bottom: 50px;
margin-left: 100px;
margin-right: 100px;

[속기형]
margin : 50px 100px;
순서대로 적용

top에 50px, right에 100px, bottom에 50px left에 50px.

margin-top: 50px;
margin-bottom: 70px;
margin-left: 100px;
margin-right: 100px;

margin : 50px 100px 70p;

top/bottom : 둘중 하나가 없을 때 나머지와 똑같이 적용
left/right : 둘중 하나가 없을 때 나머지와 똑같이 적용

* {
  box-sizing: border-box;
}

// 모든 css 사용시 맨 처음 적용하는 코드

* {
  box-sizing: border-box;
}

.box {
  width : 500px;
  height : 500px;
  padding-top : 50px;
  paddingleft: 40px
  border: 5px solid #fff;
  background-color: #000;
  color: #fff;
}