CSS margin 요소 간 간격을 조절하는 속성

MARGIN이란?

CSS에서 margin(마진)은 요소들 사이의 간격(여백)을 조절하는 속성입니다. 요소들이라고 하니 생소할 수 있는데요. 텍스트나 그림이나 특정 영역등 HTML 내의 모든 컨텐츠들을 말하는 겁니다. 마진은 가독성 뿐만 아니라 디자인 측면에서도 중요합니다.

 

사용법 - 기본적인 활용

.my-element { 
  margin: 10px;
}

• margin 뒤에 띄워야 하는 간격값을 넣습니다.
  • px : 가장 일반적인 단위입니다. 고정된 픽셀 값으로 마진을 설정합니다
  • %(백분율) : 요소가 포함된 컨테이너의 크기에 대해 백분율로 마진을 설정합니다 
  • em : 요소의 폰트 크기 대비 상대적인 크기로 마진을 설정합니다. 부모 요소의 폰트가 기준이 됩니다
  • rem : 최상위요소 (예를 들면 body에 달린 속성)의 폰트 크기를 기준으로 상대적 크기로 마진을 설정합니다.

위의 예시에서는 요소 외부에 각각 10px을 설정한 건데요. 위, 아래, 좌, 우의 마진이 모두 동일하게 설정됩니다.

https://blog.hubspot.com/website/css-margin-vs-padding

 

사용법2 - 상하좌우 각각 마진을 설정하기

.my-element {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

 

margin 속성은 상하좌우를 디테일하게 조정할 수도 있어요.

• margin-top : 상단 마진을 조절합니다
• margin-right : 우측 마진을 조절합니다
• margin-bottom: 하단 마진을 조절합니다
• margin-left: 좌측 마진을 조절합니다

 

사용법3 - 마이너스 마진 설정하기

마진값을 마이너스로 쓸 수도 있습니다. 마이너스를 쓰게 되면 요소간 여백이 없는 걸을 넘어서서 서로 겹쳐지게 됩니다.

.my-element {
  margin-left: -10px;
}

 

사용법4 - margin 속성 하나로 상하좌우 설정하기

margin: 10px 5px 20px 15px;
margin: 10px 20px;
margin: 1em auto;
margin: auto;

위에서부터 하나씩 확인해보겠습니다.

 

margin: 10px 5px 20px 15px;

margin-top, margin-right, margin-bottom, margin-left를 한번에 쓴 겁니다. 순서대로 상 우 하 좌를 뜻하는데요. 시계방향 순서대로 쓰는 겁니다.

 

margin: 10px 20px;

margin 뒤에 속성값이 두 개만 있는 경우네요. 이 때는 상하, 좌우를 의미합니다. 상하 10px, 좌우 20px 외부 여백을 설정한 예시입니다.

 

margin: 1em auto;

이번에도 속성값이 두 개만 있는데, auto라고 쓰여져 있습니다. auto는 자동 설정하라는 뜻인 것 같은데 어떤 효과가 있을까요? 위의 예시는 좌우 여백을 auto로 하라고 했는데, 좌우 여백을 브라우저 크기를 고려해서 동일하게 만들라는 뜻입니다. 그럼 어떤 효과가 있나구요? 중앙정렬이 되겠죠?

 

margin: auto;

이번에는 auto만 썼습니다. 이 때의 의미는 상하 마진은 0, 좌우는 중양정렬하라는 뜻입니다.

 

 

margin과 padding 차이점

코린이로서 마진과 padding(패딩)의 차이를 이해하는데 시간이 걸렸어요. 

margin은 외부여백,  padding은 내부여백을 정합니다. 마진은 요소 주위에 빈 공간을 넣고, 패딩은 요소 내부에 빈 공간을 만듭니다.

이해를 돕는 그림이 있어 따왔습니다,

 

https://blog.hubspot.com/website/css-margin-vs-padding

 

 

마진은 웹 디자인에서 요소들의 간격을 조절하는 도구이고, 적절한 마진은 각 요소를 잘 배치할 수 있게 합니다. 

오늘도 하나씩 배우는 하루입니다. (이런 속도로 어느 세월에...)