1

Já vi alguns dev's usando tanto o display:block quanto table em um after/before, mas porque usar ? Eu acho que sei do porquê usar o block mas porque o table?

Qual a diferença?

Outra dúvida é sobre esse *Zoom: 1;. Por que usar?

Código

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}
1

1 Resposta 1

1

Diferença entre block e table, como o próprio nome sugere:

  • display: block: o elemento vai ser renderizado como bloco.

.exemplo{
  display: block;
  border: solid 1px red;
}

.classeTeste{
  display:block;
  border: solid 1px red;
}
<div class="exemplo"> Teste
	<div class="classeTeste">
        Div 1
	  <div class="classeTeste">
	    Div 2
	  </div>
	</div>
</div>

  • display: table: os elementos se comportam como <table>.

.exemplo{
  display: table;
  border: solid 1px red;
}

.classeTeste{
  display:table;
  border: solid 1px red;
}
<div class="exemplo"> Teste
	<div class="classeTeste">
        Div 1
	  <div class="classeTeste">
	    Div 2
	  </div>
	</div>
</div>

A propriedade zoom especifica o fator de zoom inicial para a janela ou área de visualização. Pense nele como uma lupa. Veja esse exemplo e uma explicação mais detalhada nesse Tutorial sobre Zoom.

:after e :before são chamados de pseuso-elementos e como o próprio nome já fala, são utilizados para inserir um determinado conteúdo antes ou depois de um determinado elemento. Lembre-se que os pseudo-elementos não suportam diversos conteúdo ao mesmo tempo e inserção de códigos HTML. Para saber mais detalhes e ver exemplos veja: :before e :after.

Links úteis:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .