[CSS] padding,margin 속성값 & padding 적용 차이

 

padding & margin 속성값

 

속성값의 적용 방향은 시계 바늘 12시 방향부터 오른쪽으로 도는 방향으로 순서대로이다.

즉, 12시 3시 6시 9시 순으로 상 우 하 좌 순이다

    
padding: 0 0 0 0 상 우 하 좌       속성값 4개

padding: 0 0 0 상 좌우 하           속성값 3개

padding: 0 0   상하 좌우            속성값 2개

padding: 0 상좌하우 4방향 적용   속성값 1개

 

* px로 고정값을 주는 것도 좋지만 반응형 웹사이트일 경우 %를 사용하면 유연해진다

padding 2%;

 

 

---

 

padding 적용

패딩이 없으니 글씨가 박스에 너무 딱 붙어있다

 

패딩 2% 적용

적당히 깔끔하게 떨어져 있어 보기가 좋다