CSS 단위: em

안녕하세요 코드뉴비 여러분 👋

내 이전 글을 읽었다면 em가 연쇄 효과를 일으키기 때문에 문제를 일으킬 수 있다는 것을 배웠습니다.
그렇기 때문에 font-size 에 사용하지 않는 것이 좋습니다.

그럼 언제 어디서 em를 사용하는 것이 좋을까요?
h1 안에 p 와 container 태그를 만들고 font-size 의 h1 로 3rem 의 margin-bottom 를 1em 로 설정해 봅시다.

(p 단위를 적용한 margin-bottom에만 집중하고 싶기 때문에 em 태그를 그대로 둡니다.



이제 font-size 를 5rem 로 변경해 보겠습니다.

h1 {
  font-size: 5rem;
  margin-bottom: 1em;
}

👀

렌더링된 페이지를 볼 때 margin-bottom의 크기가 h1의 font-size 크기와 같은 것을 알 수 있습니까?

하지만 margin-bottom 를 1em 로 설정했습니다. 따라서 font-size 를 제외하고는 h1 를 선언하지 않았기 때문에 크기는 16px 이어야 합니다. 맞습니까?

💡

부모로부터 크기를 상속받는 것 외에 em에 대해 알아야 할 또 다른 사항은 자체 요소의 font-size에도 상대적이라는 것입니다.

따라서 요소 내에서 font-size를 설정하고 margin 단위의 동일한 요소 내에서 padding 또는 em 값을 설정할 때마다 이 margin 또는 padding는 font-size에 상대적입니다. ) 요소에서.

요약

응답성을 할 때 em 또는 margin에서 padding를 사용하면 매우 편리할 것입니다.
margin 를 변경할 때마다 padding 또는 font-size 의 크기를 변경할 필요가 없기 때문입니다.