html 요소의 높이값이 왜 이렇게 나오는지 잘모르겠습니다

Question

* { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 0 14px; } .header { position: fixed; display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: antiquewhit; } /* 유튜브 로고 및 내비게이션 버튼*/ .start { display: flex; flex-direction: row; align-items: center; } .nav-icon { background-color: red; border-radius: 100%; }안녕하세요 html, css부터 공부중인 초보자입니다.위코드의 실행결과가 아래의 사진들입니다.제가 이해가 안가는건 nav-icon-conatiner(또는 nav-icon)와 start 및header 클래스의 높이가 28 ,64가 나오는데 어떻게 저 값이 나오는지 잘모르겠어요.nav-icon-continer(또는 nav-icon) 의 자식요소로 있는 img는 svg파일을 사용하는데 이 svg 는 크기가 24x24 입니다.그리고 유튜브 로고의 높이도 마지막 사진에 보이는 것처럼 높이가 60입니다.모두 div라는 블록요소이기때문에(블록요소는 내부 컨텐츠의 높이만큼 설정된다고 들었습니다.) header 의 높이는 60px,nav-icon-conainer(또는 nav-icon)의 높이는 24px이 되기를 기대했는데 둘다 4px이 더 많네요..패딩이나 어디설정된것 없습니다. 4px은 어디서 튀어나온걸까요?

미미광어 · Answer

border-radius: 100%; 때문 아닐까요?

세브라이드 · Answer

신비로운 CSS의 세계에 오신 것을 환영합니다.

코마상태 · Answer

로고 이미지 자체에 vertical-align: middle; 을 적용해보세요. .nav-icon img { vertical-align: middle; }

html 요소의 높이값이 왜 이렇게 나오는지 잘모르겠습니다

3개의 답변

기타 목록