margin

• 요소의 바깥 여백 지정 (음수값 사용 가능)
• 속성 값
  • auto : 브라우저가 임의로 너비 계산
  • 단위 : px, em 등 단위로 지정
  • % : 부모 요소의 가로 너비에 대한 비율로 지정
• 사용법
  • margin: 위 우 아래 좌;
  • margin: 위 [좌, 우] 아래;
  • margin: [위, 아래] [좌, 우];
  • margin: [위, 아래, 좌, 우];

.box {
    margin: 10px 20px 30px 40px;
    marign: 10px 20px 30px;
    margin: 10px 20px;
    margin: 10px;
}

• margin-top : 위쪽 여백
• margin-bottom : 아래쪽 여백
• margin-left : 왼쪽 여백
• margin-right : 오른쪽 여백

.box1 {
	margin: 10px 20px 30px 40px; /* 단축 속성 */
}
.box2 {
	/* 개별 속성 */
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 30px;
	margin-left: 40px;
}

padding

• 요소의 내부 여백 지정
• 속성 값
  • 단위 : px, em 등 단위로 지정
  • % : 부모 요소의 가로 너비에 대한 비율로 지정
• 사용법
  • padding: 위 우 아래 좌;
  • padding: 위 [좌, 우] 아래;
  • padding: [위, 아래] [좌, 우];
  • padding: [위, 아래, 좌, 우];

.box {
	padding: 10px 20px 30px 40px;
	padding: 10px 20px 40px;
	padding: 10px 40px;
	padding: 10px;
}

• padding-top : 내부 위쪽 여백
• padding-bottom : 내부 아래쪽 여백
• padding-left : 내부 왼쪽 여백
• padding-right : 내부 오른쪽 여백

.box1 {
	padding: 10px 20px 30px 40px;  /* 단축속성 */
}
.box2 {
	/* 개별속성 */
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 40px;
}