AAtomic CSS

margin-right

요소 오른쪽의 외부 간격을 설정합니다. 접두사 mr 뒤에 단위 포함 값을 붙여 사용합니다. 인라인 요소 사이 간격이나 텍스트와 아이콘 사이 여백 등에 활용됩니다.

클래스 패턴

접두사 mr + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.

클래스CSS 출력설명
mr4pxmargin-right: 4px최소 간격
mr8pxmargin-right: 8px아이콘과 텍스트 사이
mr12pxmargin-right: 12px기본 간격
mr16pxmargin-right: 16px넉넉한 간격
mr2remmargin-right: 2rem (20px)rem 단위 시작점
mr2-4remmargin-right: 2.4rem (24px)소수점은 하이픈으로 표기
mr3-2remmargin-right: 3.2rem (32px)넓은 간격

단위 비교

동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }

크기px 클래스rem 클래스
8pxmr8pxmr0-8rem
12pxmr12pxmr1-2rem
16pxmr16pxmr1-6rem
20pxmr20pxmr2rem
24pxmr24pxmr2-4rem
32pxmr32pxmr3-2rem

자주 쓰는 값

클래스실제 크기용도
mr4px4px아이콘과 텍스트 미세 간격
mr8px8px인라인 요소 사이 간격
mr16px16px태그, 뱃지 나열 간격
mr2rem20px네비게이션 항목 간격

코드 예시

<!-- 아이콘 + 텍스트 간격 -->
<span class="dif aic">
  <svg class="mr8px" width="16" height="16">...</svg>
  텍스트
</span>

<!-- 인라인 태그 나열 -->
<span class="dib mr8px mb8px py4px px12px bg27272A br4px">HTML</span>
<span class="dib mr8px mb8px py4px px12px bg27272A br4px">CSS</span>
<span class="dib mr8px mb8px py4px px12px bg27272A br4px">JS</span>

<!-- 반응형 간격 -->
<div class="mr2rem sm-mr8px">
  데스크탑 20px, 모바일 8px 오른쪽 간격
</div>

Auto 값

mra는 margin-right: auto를 적용합니다. flex 컨테이너에서 요소를 왼쪽으로 밀 때 사용합니다.

<!-- 로고를 왼쪽, 네비게이션을 오른쪽으로 분리 -->
<header class="df aic py16px px2rem">
  <div class="mra">Logo</div>
  <nav class="df gap2rem">
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

팁 & 주의사항

gap으로 대체 가능

flex/grid 컨테이너에서는 mr 대신 gap을 사용하는 것이 더 깔끔합니다. df gap8px로 자식 간 간격을 균일하게 설정할 수 있습니다.

mra로 왼쪽 정렬

flex 컨테이너에서 첫 번째 자식에 mra를 적용하면 나머지 요소가 오른쪽으로 밀립니다. 헤더에서 로고와 네비게이션을 분리할 때 유용합니다.

marginmargin-leftpadding-right