동영상 강좌보기

CSS Margin(여백)

CSS margin속성은 요소의 테두리 밖에 공간을 만드는데 사용됩니다.

CSS를 사용하면 여백을 완벽하게 제어할 수 있습니다. 요소의 각 면(위, 아래, 왼쪽, 오른쪽)의 여백을 설정하는 속성이 있습니다.

margin - 개별면 적용

CSS에는 요소의 각 면에 대한 여백을 지정하는 속성이 있습니다.

• margin-top
  
• margin-right
  
• margin-bottom
  
• margin-left
  

모든 margin속성은 다음 값을 가질 수 있습니다.

• auto - 브라우저가 여백을 자동으로 계산합니다.
  
• length - px, pt, cm 단위의 길이로 지정합니다.
  
• % - 요소의 너비에 대한 여백을 %로 지정합니다.
  
• inherit - 부모 요소에서 여백을 상속합니다.
  
• ** 음수 값이 허용됩니다.
  

다음 예제는 <p>요소의 네 면에 대해 다른 여백을 설정합니다.

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

margin - 속기 속성

코드를 줄이기 위해 하나의 속성에서 모든 여백속성을 지정할 수 있습니다.

margin속성은 다음과 같은 개별 여백 속성에 대한 속기 속성입니다.

• margin-top
  
• margin-right
  
• margin-bottom
  
• margin-left
  

작동하는 방법은 다음과 같습니다.

margin속성값이 네 개인 경우

margin : 25px 50px 75px 100px;

• top-margin : 25px
  
• right-margin : 50px
  
• bottom-margin : 75px
  
• left-margin : 100px
  

p {
    margin: 25px 50px 75px 100px;
}

margin속성값이 세 개인 경우

margin : 25px 50px 75px;

• top-margin : 25px
  
• right and left-margin : 50px
  
• bottom-margin : 75px
  

p {
    margin: 25px 50px 75px;
}

margin속성값이 두 개인 경우

margin:25px 50px;

top and bottom-margin : 25px

right and left-margin : 50px

p {
    margin: 25px 50px;
}

margin속성값이 한 개인 경우

margin:25px;

top and right and bottom and left-margin : 25px

p {
    margin: 25px;
}

auto값

margin속성값으로 auto를 설정하면 요소를 가로로 가운데 정렬을 할 수 있습니다.

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

상속(inherit)된 값

다음 예제에서 <p class="ex1">요소의 왼쪽 여백은 부모 요소 <div>에서 상속합니다.

div {
    border: 1px solid red;
    margin-left: 100px;
}

p.ex1 {
    margin-left: inherit;
}

margin겹첩(축소현상)

요소의 위쪽 및 아래쪽 여백은 두 개의 여백중 가장 큰 것과 동일한 단일 여백으로 축소됩니다.

margin겹칩은 위쪽 및 아래쪽 여백만 해당되고, 왼쪽 및 오른쪽 여백에는 이런 일이 발생하지 않습니다.

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

위 예제는 <h1>요소의 아래쪽 여백은 50px이고 <h2>요소의 위쪽 여백은 20px로 설정되어 있습니다.

상식적으로 <h1>과 <h2>사이의 수직 여백이 총 70px (50px + 20px)가 될 것입니다.

그러나 마진겹칩으로 인해 실제 마진은 50px가 됩니다.