CSS로 margin, padding 정의하기

margin과 padding은 top, left, right, bottom과 같은 방향 없이도 사용할 수 있습니다.

margin 속성에 하나의 값을 지정하면, 위쪽, 오른쪽, 아래쪽, 왼쪽 모든 방향에 10픽셀의 여백이 적용됩니다.

간단하게 "모든 방향에 동일한 여백을 적용한다"고 생각할 수 있습니다.

예를 들어 margin: 10px는 모든 방향으로 10px의 바깥 여백을 적용합니다.

margin 속성에 두 개의 값을 지정하면 첫 번째 값은 위쪽과 아래쪽 여백에, 두 번째 값은 왼쪽과 오른쪽 여백에 적용됩니다.

예를 들어 margin: 10px 20px;는 위쪽과 아래쪽 여백에 10픽셀을 적용하고, 왼쪽과 오른쪽 여백에 20픽셀을 적용합니다.

margin 속성에 세 개의 값을 지정하면 첫 번째 값은 위쪽 여백에, 두 번째 값은 왼쪽과 오른쪽 여백에, 세 번째 값은 아래쪽 여백에 적용됩니다.

예를 들어 margin: 10px 20px 30px;는 위쪽 여백에 10픽셀을 적용하고, 왼쪽과 오른쪽 여백에 20픽셀을 적용하며, 아래쪽 여백에 30픽셀을 적용합니다.

margin 속성에 네 개의 값을 지정하면 각각 위쪽, 오른쪽, 아래쪽, 왼쪽 여백에 시계 방향으로 적용됩니다.

예를 들어, margin: 10px 20px 30px 40px;는 위쪽 여백에 10px을, 오른쪽 여백에 20px을, 아래쪽 여백에 30px을, 왼쪽 여백에 40px을 적용합니다.