CSS로 margin, padding 정의하기
margin과 padding은 top, left, right, bottom과 같은 방향 없이도 사용할 수 있습니다.
1. margin의 치수를 1개 사용할 때
margin 속성에 하나의 값을 지정하면, 위쪽, 오른쪽, 아래쪽, 왼쪽 모든 방향에 10픽셀의 여백이 적용됩니다.
간단하게 "모든 방향에 동일한 여백을 적용한다"고 생각할 수 있습니다.
예를 들어 margin: 10px는 모든 방향으로 10px의 바깥 여백을 적용합니다.
2. margin의 치수를 2개 사용할 때
margin 속성에 두 개의 값을 지정하면 첫 번째 값은 위쪽과 아래쪽 여백에, 두 번째 값은 왼쪽과 오른쪽 여백에 적용됩니다.
예를 들어 margin: 10px 20px;는 위쪽과 아래쪽 여백에 10픽셀을 적용하고, 왼쪽과 오른쪽 여백에 20픽셀을 적용합니다.
3. margin의 치수를 3개 사용할 때
margin 속성에 세 개의 값을 지정하면 첫 번째 값은 위쪽 여백에, 두 번째 값은 왼쪽과 오른쪽 여백에, 세 번째 값은 아래쪽 여백에 적용됩니다.
예를 들어 margin: 10px 20px 30px;는 위쪽 여백에 10픽셀을 적용하고, 왼쪽과 오른쪽 여백에 20픽셀을 적용하며, 아래쪽 여백에 30픽셀을 적용합니다.
4. margin의 치수를 4개 사용할 때
margin 속성에 네 개의 값을 지정하면 각각 위쪽, 오른쪽, 아래쪽, 왼쪽 여백에 시계 방향으로 적용됩니다.
예를 들어, margin: 10px 20px 30px 40px;는 위쪽 여백에 10px을, 오른쪽 여백에 20px을, 아래쪽 여백에 30px을, 왼쪽 여백에 40px을 적용합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!