recoha.com

Esta semana no meio do desenvolvimento de um projeto web da qual estou envolvido por estes dias, eu tive um dúvida sobre se um determinado elemento do XHTML era de bloco ou inline, fui então pesquisar sobre e decidi escrever rapidamente por aqui, mesmo porque acho que muita gente ainda tem dúvidas quanto a isso, principalmente iniciantes, digo iniciantes porque eu tive um pouco de dúvida para compreender a diferença entre eles no começo.

Elementos de Bloco

Como o próprio nome já diz, elementos de bloco são aqueles que causam uma quebra de linha no fluxo da apresentação, que ocupam toda a largura da linha em que foi declarado, criando um linha antes e uma depois do local onde foi inserido. Elementos de bloco podem ter elementos de linha dentro deles e podem ser colocados dentro de outros elementos de bloco, porém não podem estar dentro de elementos de linha.

Lista de elementos definidos por padrão como bloco do XHTML Strict: address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, noscript, ol, p, pre, table e ul.
Esta lista de elementos é considerada de bloco, pois estes podem conter outros elementos de bloco dentro dele, sendo então considerados como tal: dd, dt, li, tbody, td, tfoot, th, thead e tr.

Elementos de Linha

Estes elementos diferentemente dos de bloco não ocupam a largura inteira da linha, eles se misturam com os elementos por perto, um bom exemplo disso pode ser visto quando exibimos o site e observamos que os elementos de linha não criam um quebra de linha. Elementos de linha podem ser colocados dentro de elementos tanto de bloco quanto de linha, porém só pode conter elementos de linha dentro deles.

Lista de elementos em linha do XHTML Strict: a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, input, kbd, label, q, samp, select, small, span, strong, sub, sup, textarea, tt e var.

Por padrão quando inserimos estas tags em nosso código XHTML, eles são mostrados no site seguindo as definições acima, mas você pode alterar como o elemento será exibido com a utilização do CSS, usando-se a propriedade display. Existem 3 tipos de exibições o bloco, a linha como já foi dito e também o hidden ou invisível na tradução que não exibirá o elemento na visualização do site, mas isso é assunto para outra hora, por enquanto é só e na próxima postagem estarei iniciando uma série de posts descrevendo os passos que eu realizei no projeto que estou trabalhando atualmente que descrevi no início deste post. Até mais e obrigado!