display: inline vs display: bloco

Qual é a diferença básica entre o seguinte CSS:

display:inline

e isto:

display:block

Usando-os separadamente em um elemento, obtenho o mesmo resultado.

display: block significa que o elemento é exibido como um bloco, como sempre foram parágrafos e cabeçalhos. Um bloco possui algum espaço em branco acima e abaixo dele e não tolera elementos HTML próximos a ele, exceto quando solicitado em contrário (adicionando uma declaração de flutuação a outro elemento, por exemplo).

display: inline significa que o elemento é exibido inline, dentro do bloco atual na mesma linha. Somente quando está entre dois blocos, o elemento forma um 'bloco anônimo', que, no entanto, possui a menor largura possível.

Leia mais sobre as opções de exibição: http://www.quirksmode.org/css/display.html

Quadra

Ocupa toda a largura disponível, com uma nova linha antes e depois (exibição: bloco;)

Na linha

Ocupa apenas a largura necessária e não força novas linhas (exibição: inline;)

display: block - uma quebra de linha antes e depois do elemento

display: inline - nenhuma quebra de linha antes ou depois do elemento

Aqui está uma tabela de comparação:

Você pode ver exemplos aqui.

display: block;cria um elemento em nível de bloco , enquanto display: inline;cria um elemento em nível de linha . É um pouco difícil explicar a diferença se você não estiver familiarizado com o modelo de caixa de css, mas basta dizer que os elementos no nível do bloco interrompem o fluxo de um documento, enquanto os elementos embutidos não.

Alguns exemplos de elementos nível de bloco incluem: div, h1, p, e hrHTML tags.

Alguns exemplos de elementos de nível em linha incluem: a, span, strong, em, b, e iHTML tags.

Pessoalmente, gosto de pensar em elementos embutidos como elementos tipográficos . Isso não é total ou tecnicamente correto, mas, na maioria dos casos, os elementos embutidos se comportam muito como o texto.

Você pode ler um artigo mais completo sobre o tópico aqui . Visto que várias outras pessoas neste tópico o citaram, pode valer a pena ler.

Visor: o bloco aceita toda a linha, ou seja, sem quebra de linha

Exibição: inline ocupará apenas o espaço exato necessário.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Você pode consultar o exemplo neste violino http://jsfiddle.net/RJXZM/1/ .

os elementos de bloco se expandem para preencher seus pais.

os elementos inline são contratados para serem grandes o suficiente para manter os filhos.

display: bloco

ocupa a linha inteira (100%) da tela, é sempre 100% do tamanho da tela

exemplo de bloco de exibição

exibição: o bloco embutido ocupa a largura necessária, pode ser de 1% a 100% do tamanho da tela

exibir exemplo de bloco embutido

é por isso que temos div e span

O estilo padrão Div é o bloco de exibição: ocupa toda a largura da tela

o estilo padrão do span é exibido: bloco embutido: o span não inicia em uma nova linha e ocupa apenas a largura necessária

Adicione uma cor de fundo ao elemento e você verá muito bem a diferença entre inline e bloco, conforme explicado pelos outros pôsteres.

Display: block Ele se comporta da mesma maneira que as tags 'p' e ocupa toda a linha e não pode haver nenhum elemento próximo a ela até que seja flutuado. Display: inline Ele usa apenas o espaço necessário e permite que outros elementos sejam alinhados ao seu lado.

Use essas propriedades em caso de formulários e você obterá uma melhor compreensão.

um bloco ou bloco embutido pode ter uma largura (por exemplo, largura: 400px) enquanto o elemento embutido não é afetado pela largura. O elemento inline pode se estender até a próxima linha de texto (por exemplo, http://codepen.io/huijing/pen/PNMxXL redimensiona a janela do navegador para ver isso) enquanto o elemento de bloco não pode.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Elementos do bloco : os elementos como div, p, os títulos são no nível do bloco. Eles começam na nova linha e ocupam toda a largura do elemento pai. Elementos embutidos: elementos como b, i, span, img estão no nível embutido. Eles nunca começam a partir de uma nova linha e ocupam uma largura de conteúdo.

Por padrão, os elementos embutidos não forçam uma nova linha a iniciar no fluxo de documentos. Elementos de bloco, por outro lado, normalmente causam uma quebra de linha. Você pode consultar este link