묻고답하기
HTML 알 수 없는 여백 질문
2019.10.13 09:18
https://tbh.kr/bernard-jou-iwaku
보시면 <main class="kashi container"> 아래로 64px 정도 되는 알 수 없는 여백이 생깁니다ㅠㅠ
<main class="kashi container">에 overflow: hidden;을 적용하면 해결이 되긴 하는데
그러면 자식 요소에 적용한 position: sticky;가 무용지물이 돼버려서 이러지도 저러지도 못하는 상황이네요
그런데 이것처럼 <p> 안에 <ruby>가 없으면 정상적으로 보이는데, 왜 안에 <ruby>가 들어가면 저런 여백이 생기는 걸까요..?
+ 확인해보니 파이어폭스에서는 아무 문제가 없고, 크롬에서는 위 링크에서만 여백이 생기고 아래 링크는 정상으로 보이고, 크로뮴이 아닌 엣지에서는 둘 다 여백이 생기네요;; 모두 <main class="kashi container">에 overflow: hidden;을 적용하면 다 해결이 되기는 합니다..
아니면 overflow: hidden;을 적용하고도 자식 요소에 있는 position: sticky;가 스크롤을 따라오게 할 수 있을까요?
<div style="clear:both;"></div> 지우시고,
CSS로
content: "";
clear: both;
display: block;
}
해보세용