scroll-margin-bottom
앵커 링크로 스크롤할 때 요소 아래쪽에 여백을 추가합니다. 고정 푸터가 있을 때 스크롤 대상이 가려지지 않도록 보정하는 데 사용합니다.
클래스 목록
패턴: smb{값}{단위}
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
smb0 | scroll-margin-bottom: 0 | 스크롤 여백 없음 |
smb8px | scroll-margin-bottom: 8px | 8px 여백 |
smb16px | scroll-margin-bottom: 16px | 16px 여백 |
smb2rem | scroll-margin-bottom: 2rem | 20px 여백 |
smb4rem | scroll-margin-bottom: 4rem | 40px 여백 |
사용 예시
<!-- Correct scroll target when fixed footer exists -->
<section id="bottom-section" class="smb6rem">
<p>Add bottom margin so it is not obscured by the fixed footer (60px)</p>
</section>
<!-- Bottom margin in vertical scroll snap -->
<div class="smb2rem bg18181B p2rem br8px">
Reserve extra space below snap point
</div>