소개

margin와 padding css 속성을 구분하는 것은 때때로 혼란스러울 수 있습니다. 이 두 속성에 대한 간략한 설명은 패딩이 요소 주변(경계 외부)에 공간을 만드는 데 도움이 되는 내부 요소로 간주될 수 있다는 것입니다. margin는 컨테이너 외부(경계 내부)의 공간을 제어하는 ​​데 사용됩니다.

이것은 이미 말한 것의 예입니다.


이미지는 box model를 표시하며 이 상자는 너비, 높이, 테두리, 패딩 및 여백 속성에 의해 기하학적으로 정의됩니다.

여유

margin 픽셀, px 또는 em 를 사용하여 % 속성의 길이를 나타낼 수 있습니다. 이 단위 중 하나를 선택하는 것은 요소의 크기와 위치를 관리하는 방법에 따라 다릅니다.

여백 영역의 크기를 설정하기 위해 접미사 -top(위), -right(오른쪽), -bottom(아래) 및 -left(왼쪽)을 사용하여 요소.

.element {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 0;
  margin-left: 15px;
}

또한 모든 값(상단, 오른쪽, 하단 및 왼쪽)을 한 줄에 설정할 수도 있습니다.



위, 아래, 오른쪽, 왼쪽의 값이 같으면 다음과 같이 표시됩니다.

심

padding는 margin 속성과 동일한 원칙을 공유합니다. 단, 요소 외부 대신 테두리 내부에 요소 주위에 공간을 생성한다는 점만 다릅니다.



그리고 이것은 방향 접미사를 사용하여 한 줄에 4면 모두의 패딩 영역 크기를 정의한 예입니다.

/* One Line Presentation */
.element {
  padding: 15px 20px 13px 8px;
}

/* Direction Suffix */
.element {
  padding-top: 15px;
  padding-right: 20px;
  padding-bottom: 13px;
  padding-left: 8px;
}