[CSS] 테두리(border), 패딩(padding), 마진(margin)

박스 모델

박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있다.

---

테두리(border)

• top, bottom, left, right 네 방향이 있고, style, width, color 세 속성이 있으며 각각의 스타일을 지정해서 디자인한다.
  • border-top-style : 테두리 스타일
  • border-top-width : 테두리 굵기
  • border-top-color : 테두리 색상

• 한 방향의 속성 값을 축약해서 작성할 수 있다.
  
  • border-top: 테두리 굵기px 테두리스타일 테두리색상
  • border-top: 10px solid #666
  • 순서는 상관 없으며 띄어쓰기로 구분한다.

• 네 방향이 모두 같을 경우 축약형으로 작성 가능
  
  • border-style: 테두리스타일
  • border-width: 테두리굵기
  • border-color: 테두리색상

• 테두리의 값이 모두 같을 때 완전 축약형으로 작성 가능
  
  • border: 테두리스타일 테두리굵기 테두리색상
  • border: dotted 10px #000
  • 순서는 상관 없으며 띄어쓰기로 구분

테두리 스타일(border-style)

1. solid : 실선 (기본값)
2. dashed : 자른선
3. dotted : 점선
4. double : 이중선
5. groove : 입체선 <-> ridge : 입체선
6. inset : 전체 박스가 깔려있는(embed) 것처럼 보임 <-> outset

아웃라인 (outline)

border와 비슷하지만 다른 콘텐츠의 영역을 침범할 수 있다. 사용 빈도 낮음, border와 작성 방식 동일

---

패딩 (padding)

패딩이란 콘텐츠 영역과 테두리 사이의 여백을 말한다.

 

• 네 방향의 값을 각각 지정할 때
  • padding-top: 값
  • padding-right: 값
  • padding-bottom: 값
  • padding-left: 값
• 네 방향의 값이 모두 같을 때
  • padding: 값
• 네 방향의 값이 다를 때 축약형으로 작성 가능
  
  • padding: top right bottom left
  • 시계방향 순으로 적용되며 위치에 맞는 값 작성
• 위아래, 좌우의 값이 같을 때 두 자리로 축약 가능
  • padding: top+bottom right+left 순으로 작성
• 좌우의 값이 같고 위 아래 값이 다를 때 세 자리로 축약 가능
  • padding: top right+left bottom 순으로 작성

---

마진 (margin)

기준 요소 바깥 여백을 말한다. (*작성 방식은 padding과 동일하다.)

• margin: 값

마진 상쇄 현상(Margin-collapsing)

상하 블록 요소의 마진끼리 맞닿는 경우 두 값 중 더 높은 값으로만 적용되는 마진 상쇄 현상이 발생한다.

 

일반적인 흐름에서

1. 형제 관계 요소의 margin-bottom과 margin-top이 만나면 둘 중 큰 값이 적용
2. 부모 자식 관계 요소에서 margin-top의 값이 같이 들어간 경우 둘 중 큰 값이 적용
3. 빈 요소의 상하 마진이 겹칠 때 (빈 요소란 height 값이 0인 블록 요소를 말함)

블록 요소의 중앙 정렬에 margin을 주로 사용

margin: 0 auto;margin: auto;

 

단, 가로 중앙 정렬만 되며 세로 중앙 정렬은 x