CSS 강좌 | Property > margin

Category

개요

margin으로 박스의 바깥 여백을 정합니다.

  • 기본값 : 0
  • 상속 : No
  • 애니메이션 : Yes
  • 버전 : CSS Level 1

문법

margin: length | auto | initial | inherit
  • length : 길이를 입력합니다.
  • auto : 위쪽 여백과 아래쪽 여백은 0으로 만들고, 오른쪽과 왼쪽 여백에는 적절한 값을 주어 요소를 가운데에 위치시킵니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

길이 값이 한 개인 경우

margin: xx

위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백을 모두 xx로 정합니다.

길이 값이 두 개인 경우

margin: xx yy

위쪽 여백과 아래쪽 여백을 xx로, 오른쪽 여백과 왼쪽 여백을 yy로 정합니다.

길이 값이 세 개인 경우

margin: xx yy zz

위쪽 여백을 xx로, 오른쪽 여백과 왼쪽 여백을 yy로, 아래쪽 여백을 zz로 정합니다.

길이 값이 네 개인 경우

margin: xx yy zz ww

위쪽 여백을 xx로, 오른쪽 여백을 yy로, 아래쪽 여백을 zz로, 왼쪽 여백을 ww로 정합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        margin: 10px 0px;
        border: 1px solid #bcbcbc;
      }
      div.a {
        padding: 10px;
      }
      div.b {
        padding: 10px 20px;
      }
      div.c {
        padding: 10px 20px 30px;
      }
      div.d {
        padding: 10px 20px 30px 40px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <code>padding: 10px;</code>
    </div>
    <div class="b">
      <code>padding: 10px 20px;</code>
    </div>
    <div class="c">
      <code>padding: 10px 20px 30px;</code>
    </div>
    <div class="d">
      <code>padding: 10px 20px 30px 40px;</code>
    </div>
  </body>
</html>

inline 요소와 inline-block 요소의 차이

inline 요소에는 좌우 여백만 적용됩니다. inline-block 요소에는 상하좌우 여백 모두 적용됩니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      span.a {
        margin: 20px;
      }
      span.b {
        display: inline-block;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <p>Lorem Ipsum Dolor</p>
    <p>Lorem <span class="a">Ipsum</span> Dolor</p>
    <p>Lorem <span class="b">Ipsum</span> Dolor</p>
  </body>
</html>

상하 여백의 특징

위에 있는 요소의 아래쪽 여백과, 그 아래에 있는 요소의 위쪽 여백은 겹칩니다.

예를 들어 위에 있는 요소의 아래쪽 여백이 20px, 아래에 있는 요소의 위쪽 여백이 30px라면, 위에 있는 요소와 아래에 있는 요소의 간격은 20+30=50(px)가 아니라 30px가 됩니다. 즉, 큰 값이 적용됩니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .a {
        margin: 20px 0px;
      }
      .b {
        margin: 30px 0px;
      }
      .c {
        margin: 40px 0px;
      }
    </style>
  </head>
  <body>
    <p class="a">Lorem Ipsum Dolor</p>
    <p class="b">Lorem Ipsum Dolor</p>
    <p class="c">Lorem Ipsum Dolor</p>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 6.0+
  • Opera : 3.5+
  • Safari : 1.0+

참고

Created on 2017-05-10 09:41 | Updated on 2017-05-10 16:07