CSS : 마진 (Margin)

마진(Margin)

margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다. 이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다.

magin css 속성은 요소의 4방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.

CSS margin 속성

속성	설명
margin	모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
margin-top	윗쪽의 마진(margin) 값을 설정함.
margin-right	오른쪽의 마진(margin) 값을 설정함.
margin-bottom	아래쪽의 마진(margin) 값을 설정함.
margin-left	왼쪽의 마진(margin) 값을 설정함.

HTML

<div class="center">중앙 정렬</div>
<div class="outside">컨테이너 밖</div>

CSS

.center {
  margin: auto;
  background: red;
  width: 100%;
}

.outside {
  margin: 2rem 0 0 -2rem;
  background: green;
  width: 100%;
}

예제

margin: 10%; /* 모두 10% */

margin: 20px; /* 모두 20px */

margin: 2.1em 10px;
/* 상하: 2.1em */
/* 좌우: 10px  */

margin: 20px 3% -2em;
/* 상: 20px */
/* 좌우: 3% */
/* 하: -2em */

margin: 20px 2px 20px 6px;
/* 상: 20px */
/* 우:  2px */
/* 하: 20px */
/* 좌:  6px */

margin: 3em auto;
/* 상하: 3em */
/* 수평 중앙정렬 */

margin: auto;
/* 상하: 0 */
/* 수평 중앙정렬 */

margin 속성값에 auto를 사용하는 이유

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정합니다.

즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 됩니다.

그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 됩니다.

예제

div {
    border: 2px solid teal;
    width: 300px;
    margin: auto;
}