LAYOUT LAB / CANONICAL HTML + CSS

icon-frame

Keep an icon aligned inside a fixed square slot.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<span class="icon_frame" aria-label="Calendar">
    <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 5h16v16H4zM4 9h16M8 2v6M16 2v6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
</span>

<style>
.icon_frame {
    block-size: 2.5rem;
    display: grid;
    inline-size: 2.5rem;
    place-items: center;
}

</style>
원문 가이드