CSS 패딩(Padding), 마진(Margin), 테두리(Border)가 적용되는 방향과 순서의 이해

CSS 속성 중 여백과 테두리는 상하좌우(Top, Bottom, Left, Right) 방향이 있습니다.

각 방향의 여백과 테두리는 개별적으로 속성을 정의할 수도 있고, 일부, 또는 전체 방향을 한번에 정의할 수도 있습니다.

기본적으로 여백과 테두리는 다음과 같이 개별 방향의 속성을 정의하는 방식으로 정의할 수 있습니다.

padding-top : 5px;
padding-left : 7px;
padding-right : 10px;
padding-bottom : 5px;

margin-top : 5px;
margin-left : 7px;
margin-right : 10px;
margin-bottom : 5px;

border-top: 2px;
border-left: 1px;
border-right: 5px;
border-bottom: 3px;

"padding", "margin", "border" 속성에 방향 접미어("-top", "-left", "-right", "-bottom") 를 붙여서 표기하기 때문에 방향과 속성을 이해하기가 쉽습니다.

다만, 이 방법은 코딩량이 많고, 모든 방향을 정의해야 하기 때문에 예외적으로만 사용하는 것이 좋습니다.

효율충인 우리에게는 훨씬 더 효율적이고 관리가 편한 더 방법이 있기 때문에 주로 다음과 같은 단축 표기 방법을 사용합니다.

padding: 0;
padding: 3px 5px;
padding: 3px 4px 5px;
padding: 3px 4px 5px 10px;
padding: 3px 0 3px 5px;

많은 초보 개발자/디자이너가 이런 단축 사용 방법의 적용되는 순서와 방향을 가장 많이 혼동합니다.

개념을 잘 잡아 두면 두고두고 도움이 될 수 있습니다.

다음 그림을 보면 이해가 바로 됩니다.

단축 표기 방법은 시계 방향으로 12->3->6->9 순서로 적용됩니다.(외웁니다.!)

모든 단축 표기 방법에 적용됩니다.

테두리 모서리를 둥글게 하는 둥근 테두리(border-radius) 속성은 10->2->4->8 순서로 적용됩니다.(외웁니다.!)

그리고 단축 속성은 각 면 별로 최대 4개의 속성을 공백을 사이에 두고 표기할 수 있습니다.

최대 4개라는 것은 최소 1개부터 표기할 수 있고, 1개, 2개, 3개 가 올 수 있다는 뜻입니다.

개수가 달라져도 시계 방향으로 시작 위치부터 순서대로 채우는 것은 동일합니다. 비어있는 위치는 맞은편(미러) 위치의 값을 사용합니다.

"0px"에서 "px"는 생략할 수 있습니다.

예를 들어 4면의 패딩을 모두 0으로 하려면 "padding: 0;"으로 표기할 수 있습니다.

개별 정의 방법과 단축 정의 방법은 혼용하지 말자.

실무에서 패딩, 마진 등의 속성을 정의할 때 개별 정의 방법과 단축 정의 방법을 혼용해서 CSS 를 작성하면, 잦은 실수가 발생합니다.

예를 들어 다음과 같은 CSS 속성을 정의한 경우

.box{
  font-size: 0.9375em;
  line-height: 1.1;
  color: #a00;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  max-width: 600px;
}

CSS를 수정하고 유지 보수를 하다보면 시간에 쫒기게 되거나, 부주의하게 되고, 다음과 같은 실수를 하게 됩니다.

".box" 클래스에 패딩을 없앨 필요가 있을 경우 

"padding-top: 15px;" 와 "padding-bottom: 15px;" 2줄을 삭제해야 하지만, 코드를 빠르게 훓어보다 보면 눈에 들어오지 않고, 맨 끝줄에 "padding: 0;" 을 추가해서 해결하게 됩니다.

.box{
  font-size: 0.9375em;
  line-height: 1.1;
  color: #a00;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  max-width: 600px;
  padding: 0;
}

여기까지는 잘 동작합니다. CSS 속성 규칙상 중복되는 속성은 가장 밑에 있는 속성 값이 최종 적용됩니다.

문제가 있는 코드지만 사용에는 아무런 문제가 없습니다.

다음 번에 패딩을 다시 조정해야해서(패딩 값을 10px로 변경) 코드를 보다보면, 맨 밑줄의 "padding: 0;"은 눈에 들어오지 않고, 그 위의 "padding-top: 15px;" 와 "padding-bottom: 15px;" 2줄이 먼저 눈에 들어옵니다.

대부분 그렇지만 맨 밑줄에 추가한 사소한 패딩 초기화 같은건 기억이 날리가 없습니다.

그래서 위의 패딩 정의 2줄을 "padding-top: 10px;" 와 "padding-bottom: 10px;"으로 수정하지만, 패딩은 여전히 적용되지 않습니다.

맨 밑줄의 "padding: 0;" 이 최종적으로 적용되기 때문입니다.

실제로 CSS 코드를 유지보수하면 이런 실수가 생각보다 잦게 됩니다.

코딩 습관을 어느 한쪽으로 통일해서(단축 표기 방법을 추천) 사용함으로써 이런 실수로 인해서 시간을 허비하는 횟수를 줄일 수 있습니다.