{"id":304584,"date":"2020-03-09T13:43:24","date_gmt":"2020-03-09T20:43:24","guid":{"rendered":"https:\/\/css-tricks.com\/?p=304584"},"modified":"2020-03-09T13:43:25","modified_gmt":"2020-03-09T20:43:25","slug":"negative-margins","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/negative-margins\/","title":{"rendered":"Negative Margins"},"content":{"rendered":"\n<p>PPK <a href=\"https:\/\/www.quirksmode.org\/blog\/archives\/2020\/02\/negative_margin.html\" rel=\"noopener\">digs into the subject<\/a>, which he found woefully undercovered in web tech documentation. <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/\">Our entry<\/a> doesn&#8217;t mention them at all, which I&#8217;ll aim to fix. <\/p>\n\n\n\n<p>Agree on this situation:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.<\/p><\/blockquote>\n\n\n\n<!--more-->\n\n\n\n<p>Like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRJvEVV\" src=\"\/\/codepen.io\/anon\/embed\/GRJvEVV?height=550&amp;theme-id=1&amp;slug-hash=GRJvEVV&amp;default-tab=css,result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRJvEVV\" title=\"CodePen Embed GRJvEVV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Anecdotally, I find negative margins fairly intuitive. Although that&#8217;s surprising since there are so many oddities, like how they sometimes affect the element applied to itself (e.g. move itself to the left) and sometimes affect other elements (e.g. move other elements upward) \u2014 plus the fact that it affects <a href=\"https:\/\/css-tricks.com\/what-you-should-know-about-collapsing-margins\/\">margin collapsing<\/a> which is weird anyway. <\/p>\n\n\n\n<p>It would probably be smart to do this directional margin stuff <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/WNvEEZj\" rel=\"noopener\">with logical properties<\/a> too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn&#8217;t mention them at all, which I&#8217;ll aim to fix. Agree on this situation: This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":304612,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1392,1190],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/negative-margins.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304584"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=304584"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304584\/revisions"}],"predecessor-version":[{"id":304613,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304584\/revisions\/304613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/304612"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}