{"id":180,"date":"2009-01-18T10:48:46","date_gmt":"2009-01-18T12:48:46","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=180"},"modified":"2015-04-25T16:30:46","modified_gmt":"2015-04-25T19:30:46","slug":"elemento-inline-e-nivel-de-bloco","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco","title":{"rendered":"Elementos inline e n\u00edvel de bloco"},"content":{"rendered":"

Para um bom entendimento da renderiza\u00e7\u00e3o dos elementos HTML \u00e9 necess\u00e1rio o entendimento de elementos n\u00edveis de bloco, inline e os invis\u00edveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marca\u00e7\u00e3o adicional.<\/p>\n

Elementos n\u00edvel de bloco<\/h2>\n

Elementos n\u00edvel de bloco ocupam toda largura dispon\u00edvel na p\u00e1gina e criam uma linha invis\u00edvel antes e depois de si pr\u00f3prio. Elementos n\u00edvel de bloco sempre come\u00e7am em nova linha.<\/p>\n

Um elemento que venha antes ou depois de um elemento n\u00edvel de bloco \u00e9 renderizado acima ou abaixo do elemento n\u00edvel de bloco, nunca ao lado. Elementos n\u00edvel de bloco podem conter elementos inline e outros elementos n\u00edvel de bloco.<\/p>\n

Exemplos de tags n\u00edvel de bloco:<\/h3>\n
address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, \r\nh1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table,\r\ntbody, thead, tfoot, tr, td, th<\/pre>\n
<\/p>\n
Elementos inline<\/h2>\n
Ocupa somente a largura do elemento, largura necess\u00e1ria. Elementos “inline” poder\u00e3o apenas conter informa\u00e7\u00f5es e outros elementos “inline”, jamais poder\u00e3o conter elementos n\u00edvel de bloco. <\/p>\n
Diferente dos elementos n\u00edvel de bloco os inline n\u00e3o come\u00e7am em nova linha.<\/p>\n
Exemplos de tags inlines:<\/h3>\n
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn,em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select,small, span, strike, strong, sub, sup, textarea, tt, u, var<\/pre>\n
Elementos invis\u00edveis<\/h2>\n
S\u00e3o definidos como tags invis\u00edveis porque est\u00e3o escritas no documento mas o usu\u00e1rio n\u00e3o as v\u00ea. <\/p>\n
Exemplos de elementos invis\u00edveis:<\/h3>\n
meta, link, style, title<\/pre>\n
Usando display:block; e display:inline; podemos trocar um elemento para n\u00edvel de bloco e inline respectivamente.<\/p>\n","protected":false},"excerpt":{"rendered":"
Para um bom entendimento da renderiza\u00e7\u00e3o dos elementos HTML \u00e9 necess\u00e1rio o entendimento de elementos n\u00edveis de bloco, inline e os invis\u00edveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marca\u00e7\u00e3o adicional. Elementos n\u00edvel de bloco Elementos n\u00edvel de bloco ocupam toda largura dispon\u00edvel na p\u00e1gina e criam uma linha invis\u00edvel […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[48,45],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-css","tag-xhtml","tag-css"],"yoast_head":"\nElementos inline e n\u00edvel de bloco<\/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:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementos inline e n\u00edvel de bloco\" \/>\n<meta property=\"og:description\" content=\"Para um bom entendimento da renderiza\u00e7\u00e3o dos elementos HTML \u00e9 necess\u00e1rio o entendimento de elementos n\u00edveis de bloco, inline e os invis\u00edveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marca\u00e7\u00e3o adicional. Elementos n\u00edvel de bloco Elementos n\u00edvel de bloco ocupam toda largura dispon\u00edvel na p\u00e1gina e criam uma linha invis\u00edvel […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2009-01-18T12:48:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-04-25T19:30:46+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco\",\"url\":\"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco\",\"name\":\"Elementos inline e n\u00edvel de bloco\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2009-01-18T12:48:46+00:00\",\"dateModified\":\"2015-04-25T19:30:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/css\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Elementos inline e n\u00edvel de bloco\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementos inline e n\u00edvel de bloco","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:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco","og_locale":"pt_BR","og_type":"article","og_title":"Elementos inline e n\u00edvel de bloco","og_description":"Para um bom entendimento da renderiza\u00e7\u00e3o dos elementos HTML \u00e9 necess\u00e1rio o entendimento de elementos n\u00edveis de bloco, inline e os invis\u00edveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marca\u00e7\u00e3o adicional. Elementos n\u00edvel de bloco Elementos n\u00edvel de bloco ocupam toda largura dispon\u00edvel na p\u00e1gina e criam uma linha invis\u00edvel […]","og_url":"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco","og_site_name":"KADUNEW","article_published_time":"2009-01-18T12:48:46+00:00","article_modified_time":"2015-04-25T19:30:46+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco","url":"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco","name":"Elementos inline e n\u00edvel de bloco","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2009-01-18T12:48:46+00:00","dateModified":"2015-04-25T19:30:46+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/css\/elemento-inline-e-nivel-de-bloco#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.kadunew.com\/blog\/category\/css"},{"@type":"ListItem","position":3,"name":"Elementos inline e n\u00edvel de bloco"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/180"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":7,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":3746,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/180\/revisions\/3746"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}