한눈에 보는 정의
요소의 테두리 바깥쪽에서 다른 요소와의 사이에 두는 여백.
이런 말로 들어요
- 섹션 사이 마진을 늘려서 덜 답답하게 했습니다.
- 버튼 위 마진이 없어서 문단에 붙어 보여요.
그림으로 보기
마진은 테두리 바깥 여백으로 요소 사이 간격을 만듭니다. 안쪽 여백인 패딩과 구분합니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
카드와 카드 사이, 제목과 본문 사이를 띄울 때 마진을 씁니다. 마진은 테두리 바깥 공간이라 배경색이 칠해지지 않습니다. 위아래로 붙은 두 요소의 마진은 큰 쪽 하나만 적용되는 경우(마진 상쇄)가 있어 생각보다 간격이 좁게 보일 수 있습니다.
실무 예시
예를 들어 상품 카드 사이에 24px 마진을 주면 카드끼리 붙어 보이지 않고 하나씩 구분됩니다.
함께 살펴볼 점
사업 용어 "마진(이익률)"과 검색이 섞이므로 웹 맥락에서만 이 뜻입니다. 요즘은 여러 요소 간격을 gap으로 한 번에 정하는 방식도 많이 씁니다.
AI에게 이렇게 요청해 보세요
이 페이지의 섹션 사이 간격을 일정하게 맞춰 줘. margin 대신 gap을 쓸 수 있는 곳은 gap으로 바꾸고 바꾼 이유를 알려 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- margin | MDN 새 창
margin 속성이 요소의 네 방향 바깥 여백 영역을 정한다는 설명을 확인했습니다.
자료 확인 - Introduction to the CSS box model | MDN 새 창
마진이 박스 모델의 가장 바깥 영역이며 마진 상쇄가 생길 수 있다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정