CSS 레이아웃 여백

• vmin, vmax: viewfort-min, viewfort-max
• padding의 %값: 컨테이너 블럭의 너비값을 참조한다. (padding-top이든, padding-left이든 너비를 참조함)
• margin의 %값: 컨테이너 블럭의 너비값을 참조한다.

종횡비 기법

1

iframe {
    width: 100vw; /* Check margin or scroll */
    height: 56.25vw;
}

• 마진이 있을 경우 그만큼 밀려남.
• 영상을 뷰포트에 맞춤하는 경우 유용

2

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 56.25; /* check caniuse*/
}

• 사파리, 삼성 인터넷 지원 확인 필요

3

.utube {
    position: relative;
    padding-top: 56.25%;
}
.utube_iframe {
    position: absolute;
    width: 100%;height: 100%;
    top: 0;
}

종횡비 유지 유용성

• 누적 배치 변경(CLS) 문제 해결 (Cumulative Layout Shift)
• 스켈레톤 ui를 제공할 때
• 이미지 지연 로딩 기법을 사용할 때
• content-visibility: auto; 속성을 사용할 때
• 요소와 문서 전체 높이를 일정하게 유지하는 데 필요하다.

수직 마진 병합 예외

• 최상위 요소(body)의 수직 마진
• 부모의 display: flow-root
• 부모의 overflow:hidden | auton | scroll
• 부모의 padding-top/bottom 값이 0이 아닌
• 부모의 border-top/bottom 값이 0이 아닌
• display: inline | inline-*
• float: left | right

수직 마진을 병합하려는 이유

• 필요 이상의 과도한 마진이 발생하는 것을 상쇄하려는 목적을 가지고 있다.
• UA 초기 스타일에 수직 마진이 있는 요소
  • h1~6, ul, ol, dl, p, blockquote, figure, hr

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님