CSS(SCSS) - Margin(외부 여백)

1) CSS(SCSS) - Margin

• Margin 이란? Box 요소의 바깥쪽으로 여백을 주는 것을 말하며 Margin을 사용할 수 있는 기준은 다음과 같다

• 기본 : 0
  (외부 여백이 없으며 별도의 단위를 사용하지 않아도 적용은 되지만 만약 값이 1이라면 1px로 써야한다.)
• 단위 : px, vh, vw, em등의 단위로 지정
• % : 부모 요소의 가로 너비에 대한 비율로 지정

(1) Margin 사용 기준

1) Margin : 10px;
-> 위, 오른쪽, 아래, 왼쪽 모두 10px씩 적용함

margin: 10px;

2) Margin : 10px 20px;
-> 위, 아래는 10px, 오른쪽, 왼쪽은 20px씩 적용함

margin : 10px 20px;

3) Margin : 10px 20px 30px;
-> 위는 10px, 오른쪽, 왼쪽은 20px, 아래는 30px씩 적용함
(쉽게 말해서 상,중,하로 이해하면 됨)

margin : 10px 20px 30px;

4) Margin : 10px 20px 30px 40px;
-> 위는 10px, 오른쪽은 20px, 아래쪽은 30px, 왼쪽은 40px씩 적용함
(쉽게 말해서 시계방향으로 이해하면 됨)

margin : 10px 20px 30px 40px;

Tip. Margin의 방향을 별도로 설정해서 사용할 수 있다.

1) Margin-top
2) Margin-right
3) Margin-bottom
4) Margin-left