Princípios de cross-browser CSS, Entenda a diferença entre o block e inline | Blog Davidson Simões

Princípios de cross-browser CSS, Entenda a diferença entre o block e inline

Posso dizer que não existe nada melhor que terminar um projeto, olhar em todos os browsers e ver exatamente o mesmo em todos, sem nenhuma diferença em tamanho de fontes, espaçamentos, alinhamentos e etc .

Infelizmente, nem todos os desenvolvedores conseguem esse resultado, esse objetivo é de consenso geral a ser quase impossível de alcançar.

Como desenvolvedores, nosso objetivo não pode ser apenas começar a trabalhar em cada navegador, o nosso objetivo deve ser começar a trabalhar em cada navegador com uma quantidade mínima de código, assim podemos permitir uma futura manutenção sem problemas.

Ao longo da semana, vou colocar aqui alguns dos princípios mais importantes em CSS e dicas que podem ajudar os novos desenvolvedores front-end a atingir o mais próximo possível de uma experiência consistente em cross-browser, com o mínimo de código css possível.

Hoje muitos desenvolvedores ainda não sabem o significado de block e inline. Essa é uma informação fundamental que, quando é completamente compreendida acaba evitando muitas dores de cabeça e você acaba tendo mais confiança na validação com os browsers.

A imagem abaixo ilustra a diferença entre o atributo block e o inline:

Aqui estão algumas regras básicas que diferenciam os atributos block e inline:

  • Atributo block – irá, por padrão, expandir horizontalmente para preencher seu conteúdo pai, portanto não há necessidade de definir uma largura de “100%”.
  • Atributo inline – irá ignorar as configurações de largura ou altura.
  • Atributo inline – podem ser alinhados com a propriedade vertical-align, mas o atributo block não pode.
  • Atributo inline – terão algum espaço natural abaixo deles, a fim de acomodar os elementos do texto que caem abaixo da linha (como por exemplo a letra “g”).
Share to Google Plus

« »

1 Comentário:

  • Poker Gratis diz:

    Tudo bem?, observei a tua web page e gostei muito, tás a trabalhar muito bem!
    Vai em frente com o bom espaço!
    Adeus

DEIXE SEU COMENTÁRIO




*
  • PORTFÓLIO
  • CONTATO
  • SOBRE MIM