[css] 여백이나 패딩 값 상하좌우 동일하게 설정하기

일반적으로 상하좌우 각각의 값에 대해 따로 설정하는 것이 기본이지만, 동일한 여백이나 패딩 값을 설정해야 하는 경우가 있습니다. 이때 간편하게 사용할 수 있는 방법은 margin 또는 padding 속성에 1개의 값만 지정하면 됩니다.

.element {
  margin: 10px; /* 모든 방향에 대해 10px의 여백을 설정 */
  padding: 20px; /* 모든 방향에 대해 20px의 패딩을 설정 */
}

위와 같이 단일 값 하나만 적용하면 해당 값이 상하좌우 모두에 적용됩니다. 아래 이미지는 각 방향에 대한 여백과 패딩이 동일하게 적용된 예시를 보여줍니다.

동일 여백과 패딩

이와 같이 간단하게 여백이나 패딩의 값을 동일하게 설정할 수 있습니다.