CSS에서 margin-right 속성은 요소의 오른쪽 여백(바깥쪽 간격)을 설정하는 데 사용됩니다. 이 속성을 활용하면 요소와 그 오른쪽에 인접한 요소 사이의 거리를 조절할 수 있어 레이아웃 배치에 매우 유용합니다.
margin-right 속성에 사용할 수 있는 값
- 길이 값(length): px, pt, em, rem 등 고정 단위로 여백을 지정합니다.
- 백분율(%): 부모 요소(컨테이너) 너비를 기준으로 한 비율로 여백을 지정합니다.
- auto: 브라우저가 자동으로 여백을 계산합니다. 주로 요소를 오른쪽으로 정렬할 때 활용됩니다.
예제 코드
다음 예제는 첫 번째 문단에는 픽셀(px) 단위로, 두 번째 문단에는 백분율(%) 단위로 오른쪽 여백을 설정한 모습입니다.
<html> <head> </head> <body> <p style = "margin-right: 10px; border:2px solid red;"> Cricket crazy nation India! </p> <p style = "margin-right: 10%; border:2px solid green;"> Cricket crazy nation Australia! </p> </body> </html>
실행 결과 설명
위 코드를 실행하면 빨간색 테두리 문단은 오른쪽에 10px의 고정 여백이 적용되고, 초록색 테두리 문단은 부모 요소 너비의 10%만큼 여백이 생깁니다. 화면 크기에 따라 반응형으로 여백이 조절되기를 원한다면 % 단위를, 항상 일정한 간격이 필요하다면 px 단위를 사용하는 것이 좋습니다.