[지식루프의 웹개발공부] CSS의 margin

 

CSS의 속성 중 margin 은 요소의 외부 여백을 지정한다. 

 

 

element는 우리가 작성한 컨텐츠라고 보면 된다. 

 

margin 은 속성값을 가진다. 

- 단위 : px, em, cm 등의 단위가 있다. 

- auto : 브라우저가 너비를 계산한다

- % : 부모 요소의 가로 너비에 대한 비율로 지정한다.

 

 

1. 모든 방향에 대해 한 번에 설정하는 방법

.element { margin: 20px 15px 10px 5px; }

이 방식은 위, 오른쪽, 아래, 왼쪽 순으로 여백을 지정한다.

2. 축약형 사용법

축약형을 사용하면 1개, 2개 또는 3개의 값을 줄 수 있다.

• 하나의 값: 모든 방향에 동일한 여백을 준다
  .element {
  margin: 20px; /* 위, 오른쪽, 아래, 왼쪽 모두 20px */
  }
  
  
• 두 개의 값:
  
  첫 번째 값은 위와 아래, 에 적용, 
  두 번째 값은 좌, 우 에 적용, 
  .element {
  margin: 20px 10px; /* 위, 아래 20px / 오른쪽, 왼쪽 10px */
  }
  
  
• 세 개의 값:
  
  첫 번째 값은 위,
  두 번째 값은 오른쪽과 왼쪽,
  세 번째 값은 아래에 적용.
  .element {
  margin: 20px 15px 10px;    /* 위 20px / 오른쪽, 왼쪽 15px/ 아래 10px */
  }

3. 개별 방향에 margin 설정

 

.element {

margin-top: 20px; /* 위쪽 여백 */

margin-right: 15px; /* 오른쪽 여백 */

margin-bottom: 10px; /* 아래쪽 여백 */

margin-left: 5px; /* 왼쪽 여백 */

}