TOC

1. 패딩과 마진
2. 여백 값 지정
3. 예시 코드
4. 참고 자료

패딩과 마진

웹 디자인에서 패딩과 마진은 레이아웃을 조정하는 데 중요한 역할을 합니다.

• 패딩: 요소의 내부 여백으로, 텍스트나 요소 모서리와의 거리를 지정합니다.
• 마진: 요소의 외부 여백으로, 각 요소 사이의 공간을 조절합니다.

여백 값 지정

여백 값을 지정할 때는 픽셀(px), 백분율(%), em 또는 rem 등의 단위를 사용할 수 있습니다. 그러나 가변 단위 (em, rem)를 사용하면 레이아웃이 확대 또는 축소될 때 상대적으로 크기가 변하기 때문에 반응형 디자인에 더 적합합니다.

예시 코드

/* 패딩 및 마진 값 지정 예시 */
.element {
  padding: 20px; /* 픽셀(px) 단위 사용 */
  margin: 5%; /* 백분율(%) 단위 사용 */
}

참고 자료

• CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model
• CSS Units: https://www.w3schools.com/cssref/css_units.asp ```