{"id":30397,"date":"2023-01-14T19:31:30","date_gmt":"2023-01-14T14:01:30","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/"},"modified":"2023-01-14T19:31:30","modified_gmt":"2023-01-14T14:01:30","slug":"solved-white-space-on-top-of-page-firefox-specific-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/","title":{"rendered":"[Solved] White space on top of page (Firefox Specific) [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-10748272\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"10748272\" data-parentid=\"10747517\" data-score=\"5\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>This appears to be a Firefox bug (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=451791\">#451791<\/a>). The margin collapse is done wrong. It collapses through <code>hr.clear<\/code>, as it has no height\/padding\/border, resulting in 90px of margin above <code>hr.clear<\/code>, but it also applies the correct margin of 90px below the floating element.<\/p>\n<p>Any fix that would ordinarily prevent margin collapse will stop this behavior. For example, setting <code>hr.clear { height: 1px }<\/code> pushes everything back up, but it also shifts things down a pixel, which is undesirable. An interesting fix is to set <code>header { padding-top: .001em }<\/code>. This won&#8217;t add enough padding to actually shift things visually, but it counts enough to prevent the margin from collapsing beyond the boundaries of <code>header<\/code>.<\/p>\n<p>Alternatively, you could just rewrite your code to avoid this structure.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\"><\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved White space on top of page (Firefox Specific) [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height\/padding\/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element. Any fix that would ordinarily prevent margin collapse will stop this &#8230; <a title=\"[Solved] White space on top of page (Firefox Specific) [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\" aria-label=\"More on [Solved] White space on top of page (Firefox Specific) [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,1723,346],"class_list":["post-30397","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-firefox","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] White space on top of page (Firefox Specific) [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] White space on top of page (Firefox Specific) [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height\/padding\/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element. Any fix that would ordinarily prevent margin collapse will stop this ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-14T14:01:30+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] White space on top of page (Firefox Specific) [closed]\",\"datePublished\":\"2023-01-14T14:01:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\"},\"wordCount\":136,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"firefox\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\",\"name\":\"[Solved] White space on top of page (Firefox Specific) [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-14T14:01:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] White space on top of page (Firefox Specific) [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] White space on top of page (Firefox Specific) [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] White space on top of page (Firefox Specific) [closed] - JassWeb","og_description":"[ad_1] This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height\/padding\/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element. Any fix that would ordinarily prevent margin collapse will stop this ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/","og_site_name":"JassWeb","article_published_time":"2023-01-14T14:01:30+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] White space on top of page (Firefox Specific) [closed]","datePublished":"2023-01-14T14:01:30+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/"},"wordCount":136,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","firefox","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/","name":"[Solved] White space on top of page (Firefox Specific) [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-14T14:01:30+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-white-space-on-top-of-page-firefox-specific-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] White space on top of page (Firefox Specific) [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=30397"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30397\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=30397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=30397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=30397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}