[ CSS ] padding / box-sizing:border-box;

- 여백

 

ex) CSS( box 안에서 작용하는 여백 )

padding-방향 : 길이;

방향 : top , right , bottom , left

padding:길이;

길이 1개 입력시 : top,right,bottom,left 입력값 모두에게 적용

길이 2개 입력시 : top, bottom/right,left 입력값 순서대로 적용

길이 4개 입력시 : top.right.bottom,left 입력값 시계방향으로 적용

 

만약 아래코드일 경우 총 너비의 값

width:200px;
border:10px solid red;
padding-top : 50px;
padding-right: 50px;
padding-left : 50px;
padding-bottom : 50px;

- 결과 : 200 + 10 + 10 + 50 + 50 = 320 

 

*사이즈를 정해주고 싶을경우

box-sizing:border-box;
width:200px;
border:10px solid red;
padding-top : 50px;
padding-right: 50px;
padding-left : 50px;
padding-bottom : 50px;

- 결과 : 200