[CSS] margin 과 padding

 margin, padding

1) margin은 외부 여백을 뜻합니다 단위 px,em,vw 등으로 지정하며 적용하는 방법은

.ABC { margin : 10px;}   // 상하좌우 모두 여백

.ABC { margin : 10px, 20px;}   // 앞쪽 10px은 상하   뒤 20px은 좌우

.ABC { margin : 10px, 15px, 20px;}  //앞쪽 10px은 상  가운데 15px 좌우  뒤 20px은 하

.ABC { margin : 10px, 15px, 15px, 20px;}  // 앞부터 뒤까지 시계방향으로 상 우 하 좌 순으로 적용됩니다.

 

위와 같이 네가지 방법으로 적용 가능합니다. 

 

2) padding은 내부 여백을 뜻합니다 단위는 px,em,vw 등으로 지정하며 적용하는 방법은 margin과 같이

.ABC { padding : 10px;}   // 상하좌우 모두 여백

.ABC { padding : 10px, 20px;}   // 앞쪽 10px은 상하   뒤 20px은 좌우

.ABC { padding : 10px, 15px, 20px;}  //앞쪽 10px은 상  가운데 15px 좌우  뒤 20px은 하

.ABC { padding : 10px, 15px, 15px, 20px;}  // 앞부터 뒤까지 시계방향으로 상 우 하 좌 순으로 적용됩니다.

 

 

 

See the Pen by jinseoIT (@jinseoit) on CodePen.