웹프로그래밍 (14) Margin 영역

📕 Margin 영역

• padding 관련 속성처럼 크기를 적용할 수 있다.

• 위쪽 오른쪽 아래쪽 왼쪽으로 지정한다.
  margin--top, margin--right, margin--bottom, margin--left으로도 지정이 가능하다.

📒 속성값

• length : 고정값으로 지정합니다. (ex. px, em ....)
• percent : 컨테이너 요소(부모 요소, 조상요소)의 너비를 기준으로 백분율을 계산한다.
• auto : 가로축 정렬을 할 때 쓰인다.

📒 속성값 auto

• 좌우값을 설정할 수 있다.
• margin-left: auto : 왼쪽으로 정렬
• margin-right: auto : 오른쪽으로 정렬
• margin : auto : 가로축 중앙정렬
  👉 auto: 값은 브라우저에서 자동지정된다.

📖 축약형 magin

• 왼쪽 오른쪽 아래쪽 왼쪽을 한번에 설정할 수 있다.

magin : 30px 40px 50px 69px

• padding과 마찬가지로 동일한 값은 한번에 쓸수 있고 좌우값이 auto인 경우도 합쳐서 쓸 수 있다.

margin: 10px auto

📒 Margin-collapsing

• 인접한 두개의 수직방향 박스의 마진이 인접한 상단,하단 요소가 합쳐진다.
  - 값이 다를 경우: 더 큰 값으로 병합된다.
  - 값이 동일 할 경우 : 그 값으로 상하단 마진의 병합이 일어난다.
  

마진상쇄 더 알아보기

📕 margin과 padding 여백 선언하기 차이점

📖 margin 속성값 선언 방법

• 양수값 : 가능
• 음수값 : 가능 👉 요소가 겹쳐진다.
• auto : 가능 👉 좌우값 지정가능, 자동정렬 기능
• % : 가로축 기준으로
• 숫자는 꼭 단위를 써야한다. (px나 %으로)

📖 padding 속성값 선언 방법

• 양수값 :가능
• 음수값 : 불가능
• auto : 없음
• % : 가로축 기준으로
• 숫자는 꼭 단위를 써야한다. (px나 %으로)

📒 margin과 padding에서의 %

• 컨테이닝 블록의 width를 기준으로 기준으로 계산한다. .