css 여백에 대하여

패딩과 마진은 부모요소의 너비를 기준으로 한다.

비율이 유지된 박스를 만들 수 있다.

종횡비 유지 비법

/* 영상을 뷰포트에 맞춤하는 경우 유용 */
iframe {
  width: 100vw;
  height: 56.25vw;
}
/*사파리, 삼성 인터넷 지원 확인 필요  */
iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 100/56.25;
}

.utube {
  position: relative;
  padding-top: 56.25%;
}

.utube__iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

유용성

1. 누적 배치 변경(CLS) 문제 해결
2. 스켈레톤 UI를 제공할 때
3. 이미지 지연 로딩 기법을 사용할 때
   • 로딩되지 않은 이미지의 높이가 0으로 계산된다.
   • 높이를 기준으로 잡혀진 레이아웃은 깨질 수 있다.
4. content-visiblity: auto 속성을 사용할 때,

요소와 문서의 전체 높이를 일정하게 유지하는데에 필요.

수진 마진 병합

인접된 형제나 부모 자식 사이에서의 수직마진이 병합된다.

1. 블럭요소 사이에서만 발생한다.
2. 양수끼리, 음수끼리 만난 경우 절대값이 큰 값이 적용된다.
3. 양수와 음수가 만난 경우 두 값의 합이 적용된다.

이유

초기 스타일에 수직 마진이 있는 요소로 인해 양쪽 수진 마진에 발생하는 과도한 간격을 상쇄하기 위해 발생한다.

예외

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