컨텐츠 영역의 높이 차이

인프런 커뮤니티 질문&답변

작성한 질문수

<1만 시간의 법칙> 웹 페이지 제작하기

작성

294

검은색 줄이 쳐져 있는 모습을 보면 알 수 있듯이 공유하기 버튼과 훈련하기 go go 버튼의 높이가 차이가 납니다.

제 오류인가 싶어 fianl 코드로 실행을 해보아도 똑같았습니다.

<div class=share> 부분에만 따로 덜 넣거나 더 넣은 것도 아니고 같은 buttons 의 css를 따르고

다른 것은 배경화면의 색과 왼쪽의 마진을 넣은 것 뿐입니다.

제 컴퓨터의 에러로 이런 것인가요? 아니면 따로 해결방법이 있을까요?

답변 1

지식공유자

안녕하세요 좋은 질문 감사드립니다.

확인해본 결과 해당 문제는 윈도우 기반의 크롬과 엣지 브라우저에서 나타나고 있었습니다.

원인은 폰트로 사용된 GmarketSansBold때문인 것으로 파악되었습니다. 해당 폰트를 사용중에 텍스트에 띄어쓰기가 되어 있으면 컨텐츠의 높이가 달라지고 있습니다.

때문에 해결 방법으로는

1. 해당 폰트를 사용하지 않거나

2. 버튼 텍스트의 띄어쓰기를 제거하거나

3. 버튼에 높이 값을 줘서 강제하거나

이 세 가지 방법정도 있을것 같습니다.

답변이 도움이 됐으면 좋겠습니다. 감사합니다 :)

질문자

감사합니다~

작성한 질문수