Elementos de bloco versus elementos embutidos no HTML: por que a distinção?

14

A distinção entre elementos de bloco e inline sempre me pareceu estranha. Toda a diferença é que um elemento de bloco ocupa toda a largura, forçando uma quebra de linha antes e depois do elemento, e um elemento embutido ocupa apenas tanto quanto o conteúdo. Por que não apenas ter um tipo de elemento - um elemento embutido no qual você também pode aplicar altura / largura personalizadas e usá-lo? Você quer quebras de linha? Insira um <br />, ou talvez adicione uma tag especial no CSS para esse comportamento. Do jeito que está agora, não o vejo resolvendo nenhum problema e, em vez disso, apenas força uma propriedade que, na minha opinião, deve ser decidida por um designer.

Então, por que os dois tipos?

EpsilonVector
fonte
Minha parte favorita desta pergunta é como ela usa um estilo embutido para oe <br/>uma <p>tag para separar a última linha do primeiro parágrafo. Talvez você deva começar a observar grandes diferenças na intenção visual e não nas diferenças na implementação.
riwalk
1
Embora eu 100% acredite que os elementos do bloco sejam úteis e discorde da sua solução proposta, essa ainda é uma ótima pergunta.
Nicole

Respostas:

12

Você diz:

Você quer quebras de linha? Insira um <br />, ou talvez adicione uma tag especial no CSS para esse comportamento. Do jeito que está agora, não o vejo resolvendo nenhum problema e, em vez disso, apenas força uma propriedade que, na minha opinião, deve ser decidida por um designer.

Você está no caminho certo - o estilo deve ser decidido pelo designer.

Mas você tem o problema ao contrário. A inserção de uma <br/>tag é na verdade a opção que "força uma propriedade que deve ser decidida por um designer" - dentro do documento de marcação, quando <br/>existe, existe - e somente com CSS complicado / hacky você pode remover seu efeito.

Inline / bloco elements, por outro lado, são elementos puramente estilizados com um padrão conveniente para o caso de uso comum. A propriedade visual em si pode ser alterada instantaneamente por um designer de CSS com display:inlineou display:block.

Tomemos, por exemplo, o elemento comum para a navegação nos dias de hoje - <li>. Esses são blockelementos padrão , mas os designers farão floatcom que apareçam em linha ( blocktem mais propriedades especiais do que apenas ocupar a linha inteira, mas isso é uma conversa para outro dia).

Nicole
fonte
3

A maioria dos elementos possui uma formatação padrão ... Sua pergunta pode ser estendida para dizer que essa formatação deve ser também uma decisão do designer e deve ser removida. Eu sempre achei que era um ponto de partida e removi a formatação, se necessário (geralmente não era). Mas no final, há algumas coisas que são naturais. Se você tem um parágrafo, por exemplo, espera que seja um elemento de bloco porque essa é a natureza de um parágrafo. Independentemente de os elementos terem ou não configurações padrão, como block ou inline, eu definitivamente desejaria que, de qualquer maneira, fosse possível especificar essa opção. A razão pela qual digo isso é a IMO, que é mais limpa para quebrar as coisas dessa maneira, em vez de<br />no HTML. Faz a mesma coisa? Sim. Mas, com os recentes avanços no HTML, um grande esforço foi focado em torná-lo mais uma linguagem semântica, na qual você coloca menos no HTML no que diz respeito à formatação e mais no CSS. A <br />quebra de linha média que normalmente se refere a uma quebra de linha em um parágrafo ou outra frase contendo estrutura. No final, isso não importa para mim, mas eu pessoalmente quero a capacidade de ter uma distinção entre bloco e linha, por isso espero que eles nunca o removam pelo menos do lado CSS!

Kenneth
fonte
1

É como dizer que não há diferença real entre parágrafos e frases. Os parágrafos delimitam um grupo de idéias. Normalmente, uma frase é para uma única ideia.

A marcação é sobre semântica, não é exibida. De fato, um designer é livre para tratar qualquer elemento que tenha como padrão um estilo de bloco como inline e vice-versa.

Ismael
fonte
1

No LaTeX , existem dois modos (não incluindo o modo matemático): o modo horizontal e o modo vertical. Os elementos (caracteres) são caixas pequenas que se acumulam "horizontalmente" no parágrafo. Então essas caixas maiores se acumulam verticalmente. Isso é semelhante ao (X) HTML: inline e block.

Olivier Pirson
fonte
0

Parece um problema de compatibilidade com versões anteriores para mim. O elemento inline foi provavelmente uma adição posterior ao padrão HTML e, para que as páginas da Web escritas em 1992 ainda possam ser visualizadas em 2011, ainda sejam suportadas - como se houvesse uma tonelada de páginas da Web de 19 anos por aí ...!


fonte
-1

Eu acho que os modos de exibição são tão diferentes entre o bloco e o inline, que vale a pena fazer uma distinção no nível da marcação.

JoeM05
fonte