CSS의 margin-right 속성은 요소의 오른쪽 바깥 여백을 지정합니다. 이 속성을 활용하면 요소와 그 오른쪽에 인접한 다른 요소 사이의 간격을 자유롭게 조절할 수 있습니다.
margin-right 속성에 사용할 수 있는 값
- 길이(length) — px, pt, cm, em 등 고정 단위로 여백 크기를 지정합니다.
- 백분율(%) — 부모 요소(컨테이닝 블록) 너비를 기준으로 한 상대적인 값입니다.
- auto — 브라우저가 여백 값을 자동으로 계산하도록 설정합니다.
예제 코드
아래 예제는 첫 번째 문단에는 픽셀(px) 단위로, 두 번째 문단에는 백분율(%) 단위로 오른쪽 여백을 설정한 모습입니다. 코드를 직접 실행해 두 값의 차이를 비교해 보세요.
<html>
<head>
</head>
<body>
<p style = "margin-right: 10px; border:2px solid red;">
오른쪽 여백이 10px로 지정된 문단입니다
</p>
<p style = "margin-right: 10%; border:2px solid green;">
오른쪽 여백이 10%로 지정된 또 다른 문단입니다
</p>
</body>
</html>
실행 결과 설명
빨간 테두리의 첫 번째 문단은 화면 크기와 관계없이 항상 10px의 고정된 오른쪽 여백을 가지며, 초록 테두리의 두 번째 문단은 부모 요소 너비의 10%만큼 여백이 적용되므로 창 크기에 따라 여백이 유동적으로 변합니다.