margin 은 본문과 외부사이의 간격입니다.

padding은 본문과 본문의 태두리와의 사이이구요.

border는 margin 과 padding 사이의 것이겠네요.

margin padding border

  • margin

    1. 외부의 여백을 나타냅니다. 하나하나적을수 있습니다.
      margin-top: 위쪽 margin
      margin-right: 오른쪽 margin
      margin-bottom: 밑쪽 margin
      margin-left: 왼쪽 margin

      값으로 정할수 있습니다. 또한 auto 값도 정할수 있겟네요.

    2. 물론 이렇게 따로따로 한줄한줄 적지 않아도 됩니다.

      margin: 위 오른쪽 아래 왼쪽; 순서대로 적을수 있습니다.
      margin: 5px 10px 12px 5px; 이렇게 말이죠.

    3. 홀값인 margin: 5px; 은 사면이 다 5px 이라는 뜻입니다.
    4. 가끔 2값만이 나오는 경우가 있습니다.
      margin: 5px 4px; 이 뜻은 위아래는 5px 을 그리고 좌우는 4px 이라고 명령하는 방법입니다.
    5. 물론 margin: 0;는 모든면이 0이라는거겠네요.

  • padding

    안쪽 여백을 나타내는 padding또한 margin처럼 top right bottom left 로 나타낼수 있으며 한꺼번에 나타낼수도 있고 홀값으로 나타낼수 있습니다.

    padding-top: 5px;
    padding-right: 6px;
    padding-bottom: 10px;
    padding-left: 8px;
    padding: 5px 4px; – padding 위아래는 5px이고 좌우는 4px 임.
    padding: 8px; – 모든면의 padding이 8px임
    padding: 0;