margin, padding 에 대해

margin과 padding을 박스 선물 포장으로 예를 들자면:

• padding은 선물과 선물상자 사이의 공간 (내부 여백)
• margin은 선물상자와 다른 선물상자 사이의 공간 (외부 여백)

시각적 설명:

margin (바깥 여백)
┌───────────────────────┐
│     padding (안쪽 여백) │
│     ┌─────────┐       │
│     │ Content │       │
│     └─────────┘       │
└───────────────────────┘

실제 사용 예시:

1. padding (내부 여백)

/* 모든 방향에 20px 패딩 적용 */
.box {
    padding: 20px;
}

/* 각 방향별로 다른 패딩 적용 */
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

/* 축약형 (위, 오른쪽, 아래, 왼쪽 순서) */
.box {
    padding: 10px 20px 10px 20px;
}

2. margin (외부 여백)

/* 모든 방향에 20px 마진 적용 */
.box {
    margin: 20px;
}

/* 각 방향별로 다른 마진 적용 */
.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

/* 축약형 (위, 오른쪽, 아래, 왼쪽 순서) */
.box {
    margin: 10px 20px 10px 20px;
}

자주 사용되는 패턴:
1. 내용과 테두리 사이 간격

.button {
    padding: 10px 20px;  /* 버튼 내부 여백 */
}

2. 요소들 사이 간격

.paragraph {
    margin-bottom: 20px;  /* 문단 사이 간격 */
}

3. 가운데 정렬

.center-box {
    margin: 0 auto;  /* 좌우 마진을 auto로 설정하여 가운데 정렬 */
    width: 80%;
}

핵심 차이점:

1. padding

• 요소의 내부 여백
• 배경색이 적용됨
• border 안쪽에 위치

2. margin

• 요소의 외부 여백
• 배경색이 적용되지 않음
• border 바깥쪽에 위치
• 음수 값 사용 가능