{"id":329,"date":"2016-10-12T15:57:47","date_gmt":"2016-10-12T18:57:47","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=329"},"modified":"2016-10-12T16:10:23","modified_gmt":"2016-10-12T19:10:23","slug":"colapso-entre-margin-top-e-margin-bottom","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/colapso-entre-margin-top-e-margin-bottom\/","title":{"rendered":"Colapso entre margin-top e margin-bottom"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/10\/margin-colapso.png\" alt=\"Colapso entre margin-top e margin-bottom\" \/>\n<p>Voc\u00ea adicionou 30px de margin-bottom a um elemento, e ao elemento abaixo dele 20px de margin-top. Voc\u00ea esperava uma dist\u00e2ncia de 50px entre ambos os elementos, mas no final ficou com apenas 30px. Por que isso acontece?<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"bwKgNm\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/bwKgNm\/\">margin<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Margin top e bottom de elementos adjacentes v\u00e3o sempre colidir, salvo quando estes elementos estiverem com float. O tamanho que prevalece \u00e9 sempre o maior, ent\u00e3o no caso de margin-bottom: 40px; e margin-top: 30px; o tamanho que ir\u00e1 prevalecer \u00e9 de 40px de dist\u00e2ncia entre um elemento e outro.<\/p>\n<p>Vale lembrar que essa \u00e9 uma caracter\u00edstica apenas do top e bottom, n\u00e3o de left e right que n\u00e3o colidem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea adicionou 30px de margin-bottom a um elemento, e ao elemento abaixo dele 20px de margin-top. Voc\u00ea esperava uma dist\u00e2ncia de 50px entre ambos os elementos, mas no final ficou com apenas 30px. Por que isso acontece? See the Pen margin by Andr\u00e9 | Origamid (@origamid) on CodePen. Margin top e bottom de elementos adjacentes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/329"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=329"}],"version-history":[{"count":2,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/329\/revisions"}],"predecessor-version":[{"id":332,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/329\/revisions\/332"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}