CSS) Box Model 이해하기 : content, padding, border, margin 정리

Margin : 바깥 여백 / Border : 테두리 / Padding : 내부 여백 / Content : 콘텐츠 영역

Margin / Padding의 방향 설정 (시계 방향) : Top → Right → Bottom → Left 

---

margin, padding의 방향 설정 (시계 방향)

: CSS에서는 시계 방향으로 값을 지정

순서: top → right → bottom → left

.box {
    margin: 10px 20px 30px 40px;
    /* top(10px) → right(20px) → bottom(30px) → left(40px) */
}
.box {
    padding: 10px 20px 30px 40px;
    /* 위(10px) → 오른쪽(20px) → 아래(30px) → 왼쪽(40px) */
}

축약형 예제

.box {
    margin: 10px; /* 네 방향 모두 10px */
    padding: 10px 20px; /* 상하 10px, 좌우 20px */
    border: 2px solid red; /* 2px 빨간 테두리 */
}

 

결론 : 

:  margin은 요소 사이의 간격을 조정, padding은 내부 콘텐츠와 테두리 사이의 간격을 조정

: box의 크기는 content + padding + border로 결정됨

: 마진과 패딩을 설정할 때 시계 방향(top → right → bottom → left) 순서를 지켜야 함!

---

Box Model: margin, border, padding, content 개념

1.  content (콘텐츠 영역)

: content는 요소의 실제 내용(텍스트, 이미지, 비디오 등)이 표시되는 영역이다.

: 즉, 우리가 웹사이트에서 눈으로 볼 수 있는 가장 핵심적인 부분

 

특징 : 

: width, height 속성으로 크기를 조절할 수 있음

: content 크기는 요소 내부에 포함된 콘텐츠의 크기에 따라 자동으로 조정되기도 함

: padding, border 크기에 따라 전체 박스의 크기가 변할 수 있음

.box {
    width: 200px;  /* 너비 200px */
    height: 100px; /* 높이 100px */
    background-color: lightblue;
}

결과: content 영역의 크기는 200px × 100px이다.

: padding과 border를 추가하면 전체 박스의 크기가 달라질 수 있다.

 

2. padding (패딩, 내부 여백)

: padding은 content와 border 사이의 내부 여백을 의미

: 즉, 콘텐츠(content)와 테두리(border) 사이의 간격을 조절하는 역할

 

특징 : 

: 요소 내부에서 content를 밀어내는 역할을 함

: background-color는 padding 영역까지 적용됨

: width, height는 기본적으로 content의 크기만 반영하기 때문에 padding이 추가되면 전체 박스 크기가 커짐

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
}

결과 :

: padding이 추가됨으로써 content 영역이 20px씩 밀려남

: 전체 박스의 크기 = content(200px) + padding(20px × 2) = 240px

: height도 마찬가지로 100px + 20px × 2 = 140px

 

3. border (테두리)

: border는 요소의 경계를 감싸는 테두리를 의미

: 테두리는 요소를 시각적으로 구분하는 역할을 하며, content + padding을 감싸는 역할을 한다.

 

특징 :

: border-width, border-style, border-color 속성을 설정할 수 있음

: 테두리의 두께만큼 전체 박스의 크기가 커질 수 있음

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
    border: 5px solid black;
}

결과 : 

: 테두리의 두께만큼 요소의 크기가 더 커짐

: border는 기본적으로 content + padding을 감싸는 역할

 

개별 방향 테두리 설정 : 

.box {
    border-top: 3px solid red;    /* 위쪽 테두리 */
    border-right: 5px dashed blue; /* 오른쪽 테두리 */
    border-bottom: 2px dotted green; /* 아래쪽 테두리 */
    border-left: 4px double black; /* 왼쪽 테두리 */
}

: 테두리 스타일에는 solid, dashed, dotted, double 등 다양한 값이 있음!

 

4. margin (마진, 바깥 여백)

: margin은 border 바깥쪽의 여백을 의미하며, 요소와 요소 사이의 간격을 조정하는 역할

 

특징 : 

: margin을 설정하면 다른 요소들과의 거리(공간)를 조절할 수 있음

: margin: auto;를 사용하면 요소를 가운데 정렬할 수 있음

: margin은 background-color 영향을 받지 않음 (항상 투명)

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}

결과 : 

: margin이 30px 설정됨 → 다른 요소와의 간격이 30px로 벌어짐

: margin은 요소의 바깥쪽 여백을 조정하므로 박스 자체의 크기에는 영향을 주지 않음

---

box-sizing 속성 활용 (전체 크기 조절)

: 기본적으로 padding과 border가 추가되면 전체 요소의 크기가 증가하지만, 이를 방지할 수 있는 속성이다.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

: box-sizing: border-box;를 사용하면 width와 height가 content가 아닌 border까지 포함한 크기로 계산됨

: 즉, padding과 border를 추가해도 전체 크기가 변하지 않는다!