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) 모든 방향 값이 동일

정리

margin : all margin: vertical(수) / horizontal(수평) margin: top / horizontal / botton

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

• length : 여백의 크기로 고정값 사용.

• percentage : 여백의 크기로 컨테이닝 블록 너비의 백분율 사용.

• auto : 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있다.

예제

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

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

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

참고

• 마진 콜렙싱 현상 (답변 확인)

• 마진 겹칩 현상 (마진 상쇄)

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)

예제

.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 테두리 지정