[CSS] margin/padding 사용법, 한줄로 적을 때 순서

 

1. margin / padding ?

---

margin  : 바깥쪽 여백

padding  : 안쪽 여백

 

 

2. margin / padding의 사용법

---

1. 방향마다 각각 지정

margin-top:10px; margin-right:20px; margin-bottom:15px; margin-left:30px;

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

 

 

2. 상하 좌우 같을 때 (margin/padding: [상=하] , [좌=우])

margin: 10px 20px; margin: 0 20px; margin: 20px 0;

padding: 10px 20px; padding: 0 20px; padding: 20px 0;

 

 

3. 좌우는 같고 상하가 다를 때 (margin/padding: 상 , [좌=우] , 하)

margin: 5px 10px 20px;

padding: 5px 10px 20px;

 

 

4. 다 다를 때 시계방향으로 작성  (margin/padding: 상, 우, 하, 좌)

margin: 12px 5px 10px 20px;

padding: 12px 5px 10px 20px;