> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/undefined-2/box.md).

# BOX

> box, CSS 박스, 마진 콜렙싱(Margin Collapsing), 마진 겹칩 현상 

## BOX

* margin-box -- 외부 공간 박스
* border-box -- 테두리 공간 박스
* padding-box -- 내부 공간 박스
* content-box -- 콘텐츠 공간 박스
  * margin-box : 투명한 영역(배경색 X), 박스와 박스 사이의 간격을 제어할 때 사용, 음수값 사용 가능(-10px, -20px..)
  * border-box : 박스 테두리 모양을 치고 싶을 때 사용 (음수값 X)
  * padding-box : 박스 안쪽에 공간 여백을 줄 때 사용 (음수값 X)
  * border-box, padding-box, content-box : 배경색 적용 가능

## margin

시계방향 순서(t r b l)로 기억하면 편하다 

* margin-top
* margin-right
* margin-bottom
* margin-left

값을 입력하는 개수에 따라 적용되는 방향이 다르다.  

* margin: t r b l 모든 방향 값이 다름
* margin: t r b (l=r)  

  위/아래 값을 다르게 줄 때, left값이 right값을 상속 받음
* margin: t r (b=t) (l=r)  

  위/아래, 좌/우 값이 동일, bottom값이 top값을 상속 받음
* margin: t (r=t) (b=t) (l=r) 모든 방향 값이 동일

{% hint style="success" %}
정리 

margin : all\
margin: vertical(수) / horizontal(수평) \
margin: top / horizontal / botton
{% endhint %}

여러 값의 종류를 입력할 수 있다. 

* length : 여백의 크기로 고정값 사용.
* percentage : 여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
* auto : 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있다.

### 예제

```css
margin: auto;   /* 마진 초기값 상하: 0 */ /* 수평 중앙정렬 */
margin: 0 auto; /* 수평 중앙정렬 */
```

## 마진 콜렙싱(마진 겹칩 현상)  

마진의 특징으로 마진이 겹쳐지는 현상을 말한다. 그렇기 때문에 한 방향으로만 마진을 설정하는 것을 권장한다. 

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRTS34B9_6ncY2Cemm3%2F-MRTSP2_HkgwTjaZtJr2%2Fimage.png?alt=media\&token=53c25335-d46b-4be1-bc0d-c1f8aea5f0c4)

### 참고 

* [마진 콜렙싱 현상 (답변 확인)](https://hashcode.co.kr/questions/5356/list-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81%ED%95%A0-%EB%95%8C-margin%EA%B3%BC-padding%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4)
* [마진 겹칩 현상 (마진 상쇄)](https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4)

## border

* border-(top|right|bottom|left)-width 

* border-(top|right|bottom|left)-style 

* border-(top|right|bottom|left)-color 

* border: width style color (모든 방향 값을 설정) 

* border-top: width style color 

* border-right: width style color 

* border-bottom: width style color 

* border-left: width style color

## padding

margin과 같은 작동 원리로 동작한다.  

* padding-top 

* padding-right 

* padding-bottom 

* padding-left 

* padding: t r b l 

* padding: t r b (l=r) 

* padding: t r (b=t) (l=r) 

* padding: t (r=t) (b=t) (l=r)

## 예제 

```css
.demo {
  width: 100px;
  height: 100px;
  background: #eee;
  text-align: center;
  line-height: 100px;
  margin: 20px 10px 10px 15px;
  padding-top: 1em;
  border-bottom: 1em double #6d70d2;
}
```

## 참고  

* [border 테두리 지정](https://www.tabmode.com/homepage/border.html#gsc.tab=0) 

###