{"id":460,"date":"2017-03-20T18:36:08","date_gmt":"2017-03-20T21:36:08","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=460"},"modified":"2017-04-04T12:11:07","modified_gmt":"2017-04-04T15:11:07","slug":"css-display-inline-vs-display-block","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/css-display-inline-vs-display-block\/","title":{"rendered":"CSS Display Inline vs Display Block"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/hJ6nYCQLo2k?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Uma das propriedades b\u00e1sicas de cada elemento HTML \u00e9 o seu display. Por padr\u00e3o, elementos como div, section, p, h1, h2, ul, li, article s\u00e3o display block e elementos como a, span, b, i, em s\u00e3o display inline.<\/p>\n<p>Agora qual a diferen\u00e7a entre eles?<\/p>\n<p>Display Block<\/p>\n<ul>\n<li>Ocupa 100% da largura do elemento pai<\/li>\n<li>Ocupa sempre a sua pr\u00f3pria linha e \u00e9 posicionado abaixo do elemento anterior<\/li>\n<li>A altura \u00e9 definida de acordo com o conte\u00fado interno<\/li>\n<li>\u00c9 poss\u00edvel definir Width e Height<\/li>\n<li>Voc\u00ea pode definir valores de margin-top e margin-bottom<\/li>\n<\/ul>\n<p>Display Inline<\/p>\n<ul>\n<li>Ocupa a largura total do seu conte\u00fado apenas<\/li>\n<li>Um elemento inline ap\u00f3s outro elemento inline ocupam a mesma linha<\/li>\n<li>N\u00e3o \u00e9 poss\u00edvel definir Width e Height<\/li>\n<li>N\u00e3o \u00e9 poss\u00edvel definir valores de margin-top e margin-bottom<\/li>\n<li>Ao aplicar o float, automaticamente eles assumem caracter\u00edsticas de display block<\/li>\n<li>Se aplicado dentro de um texto, ir\u00e1 seguir o fluxo do conte\u00fado<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2017\/03\/inline-vs-block_arquivos.zip\">Arquivos do V\u00eddeo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma das propriedades b\u00e1sicas de cada elemento HTML \u00e9 o seu display. Por padr\u00e3o, elementos como div, section, p, h1, h2, ul, li, article s\u00e3o display block e elementos como a, span, b, i, em s\u00e3o display inline. Agora qual a diferen\u00e7a entre eles? Display Block Ocupa 100% da largura do elemento pai Ocupa sempre [&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\/460"}],"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=460"}],"version-history":[{"count":7,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/460\/revisions"}],"predecessor-version":[{"id":471,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/460\/revisions\/471"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}