구글 adsense margin 오류 수정

IT/코딩 CSS

무찌마 / 2022. 6. 21. / 댓글

.revenue_unit_wrap {
    margin-top: 20px;
    margin-bottom: 20px;
}

티스토리 블로그에서 보여 주는 구글 애드센스 광고 CSS 코드를 개발자 도구로 살펴보았습니다. 상, 하 각각 20픽셀의 마진을 주어 본문의 내용과 거리를 두고 있습니다. 간단하게 그리면 아래와 같은 구조를 이루게 됩니다.

구글 애드센스 마진 정상

 

block element인 "wrap" 안에 그리고 "container" 안에 배치하였습니다.

"container" 박스 안의 마지막 개체이므로 애드센스 광고 하단의 20px margin이 "container" 하단 경계선과 접합니다. 아래 그림은 구글 크롬, 마이크로소프트 엣지, 그리고 Mozilla Foundation의 Firefox 브라우저들에서 렌더링 된 실제 모습을 간단하게 설명한 것입니다.

 

구글 애드센스 마진 오류

 

애드센스의 하단 마진이 "wrap"과 "container"의 하단 경계선을 뚫고 밖으로 튀어나오는 오류를 보입니다. 모든 브라우저에서 이와 같은 이상한 모습을 보이므로 구글 코드가 오류의 원인이라는 것을 추측할 수 있습니다.

 

블로그의 구글 애드센스 마진 오류

블로그 첫 페이지 하단의 애드센스 광고가 하단 경계선을 뚫고 "#footer" 상단에 닿은 오류 모습입니다.

 

애드센스 마진 오류 수정

 

오류를 수정하기 위하여 div "wrap" 하단에 border를 추가하였더니 오류가 발생하지 않습니다.

border-bottom: 1px solid transparent;

 

"wrap"이나 "container"에 padding을 추가해도 됩니다.

padding-bottom: 1px;

 

구글 애드센스의 상, 하 더 나아가 오른쪽 왼쪽의 다른 element와 만나는 지점에서 오류가 발생하면 그 지점의 parent element에 border 혹은 padding을 추가하면 브라우저가 정상적으로 렌더링을 합니다.

또는 parent element에 "overflow: auto;" 속성을 추가하여도 일시적으로 문제가 해결됩니다. 대신 position sticky와 충돌하여 난해한 문제가 발생합니다.

또 다른 방법으로 parent element의 경계선에 1픽셀 정도의 padding을 추가하면 이러한 오류가 발생하지 않습니다.

※ margin collapsing
SMASHING MAGAZINE, "Everything You Need To Know About CSS Margins"

 

댓글