CSS margin, padding

<margin>

요소의 외부 여백(공간)을 지정하는 단축 속성

음수 사용 가능

0 : 외부 여백 없음
auto : 브라우저가 여백을 계산(가운데 정렬 가능)
단위 : px, em, vw등 단위로 지정


margin: top,right,bottom,left;     

위, 아래, 왼쪽, 오른쪽 5px 만큼의 외부 여백 지정

div {
	margin:5px;
}

margin: top,bottom   left,right;

위,아래 10px 만큼  왼쪽,오른쪽 20px 만큼의 외부 여백 지정

div {
	margin:10px 20px;
}

margin: top   left,right   bottom;

위 10px, 왼쪽 오른쪽 15px, 아래 20px 만큼의 외부 여백 지정 (상 중 하)

div {
	margin:10px 15px 20px;
}

margin: top   right   bottom   left;

위 5px, 오른쪽 10px, 아래 15px, 왼쪽 20px 만큼의 외부 여백 지정(시계방향)

div {
	margin:5px 10px 15px 20px;
}

 

 

 

 

---

 

<padding>

요소의 내부 여백(공간)을 지정하는 단축 속성

요소의 크기가 커짐


0: 내부 여백 없음
단위: px, em, vw등 단위로 지정
%: 부모 요소의 가로 너비에 대한 비율로 지정