"margin" Property

margin 을 설정하는 2가지 방법이 존재한다. 

출처 : http://www.w3schools.com/css/css_margin.asp

 

 

1) 하나 하나 속성으로 정의하는 경우 (top, right, bottom, left) 

 

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

 

 

 

2)  더 짧게 코딩을 하는 경우 (shorthand property)

 

margin 이라는 shorthand property 를 이용한다. 

 

이 margin property 는 4가지 형태로 사용이 가능하다. 출처 : http://www.w3schools.com/css/css_margin.asp

 

4개의 경우 Top 에서 부터 시계방향이다. (Top -> 오른쪽 -> Bottom -> Lef)

 

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px
• margin: 25px 50px 75px;
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px
• margin: 25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px
• margin: 25px;
  • all four margins are 25px

 

 

 P.S) auto 값을 사용하여 브라우저가 자동으로 계산하게 할 수 도 있다. 

 

.simple { margin: 20px auto; // right, left 는 자동으로 계산 }
.simple { margin: 20px 0; // right, left 는 margin 없음 }

 

다음을 참고 !!

http://www.w3schools.com/cssref/pr_margin.asp