display: inline vs display: bloco

Respostas:

123

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

Pranay Rana
fonte
1
Existem elementos embutidos por padrão? Período?
eshellborn
1
<span> <a> e <img>
EKanadily
80

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;)

Ravish
fonte
40

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

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

xj9
fonte
23

Aqui está uma tabela de comparação:insira a descrição da imagem aqui

Você pode ver exemplos aqui.

Niko Bellic
fonte
13

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.

Damien Wilson
fonte
8

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/ .

Aarthi
fonte
1
soberbo ... isso que eu estou procurando
Vicky
7

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.

James Curran
fonte
5

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

Harshit
fonte
É por isso que temos div e span - este é impressionante bro :-)
Siva
1

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.

Janick Bernet
fonte
1

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.

kunal
fonte
0

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;
      }
EKanadily
fonte
Parece que isto é uma resposta a uma das outras oito respostas nesta pergunta. Não sei dizer qual.
Quentin
a maioria deles. apenas adicionando à informação.
EKanadily
0

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.

Avinash Malhotra
fonte
0

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

Rohan Devaki
fonte
Obrigado pela sua resposta. Verifique as outras respostas primeiro da próxima vez, pois isso não adiciona nada de novo.
BluE 26/06
Senhor Eu respondi a essa pergunta com base no conhecimento que eu sei, por que eu veria outras respostas e postaria minha resposta? Você postou esse comentário para todos que responderam a isso? Isso é tão embaraçoso.
Rohan Devaki