margin padding

margin padding

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

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

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

• 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
  
  
  출처 : http://ilmol.com/wp/css/css_dictionary/margin-padding/
  by ilmol