pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Elementos inline e nível de bloco

| 0 Comentários

Para um bom entendimento da renderização dos elementos HTML é necessário o entendimento de elementos níveis de bloco, inline e os invisíveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marcação adicional.

Elementos nível de bloco

Elementos nível de bloco ocupam toda largura disponível na página e criam uma linha invisível antes e depois de si próprio. Elementos nível de bloco sempre começam em nova linha.

Um elemento que venha antes ou depois de um elemento nível de bloco é renderizado acima ou abaixo do elemento nível de bloco, nunca ao lado. Elementos nível de bloco podem conter elementos inline e outros elementos nível de bloco.

Exemplos de tags nível de bloco:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, 
h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table,
tbody, thead, tfoot, tr, td, th

Elementos inline

Ocupa somente a largura do elemento, largura necessária. Elementos “inline” poderão apenas conter informações e outros elementos “inline”, jamais poderão conter elementos nível de bloco.

Diferente dos elementos nível de bloco os inline não começam em nova linha.

Exemplos de tags inlines:

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

Elementos invisíveis

São definidos como tags invisíveis porque estão escritas no documento mas o usuário não as vê.

Exemplos de elementos invisíveis:

meta, link, style, title

Usando display:block; e display:inline; podemos trocar um elemento para nível de bloco e inline respectivamente.

Deixe uma resposta

Campos obrigatórios *.



*

Topo