Margin x Padding

Italo Canturil — Fri, 19 Nov 2021 02:38:22 +0000

Quando comecei a aprender CSS e aprendi as propriedades de espaçamento que são margin e padding, sempre me perguntava quando usar uma e quando usar outra, não era concreto na minha mente o momento certo para usar uma ou outra, então fui fazendo de qualquer jeito, até descobrir que existem diferenças entre elas e o momento certo para usa-las.

Qual a diferença entre Margin e Padding?

Margin: é o espaço em volta do componente, distancia que o elemento tem para outro elemento em volta dele.

Exemplo do margin afastando o elemento:
Padding: é o espaço dentro do próprio componente, quanto de distancia o elemento tem pra dentro dele mesmo.

Exemplo: Como se você colocasse um casaco que lhe desse mais volume, essa distancia do casaco até sua pele é o padding.

Quando usar um ou outro?

Se usa Margin quando:
1. Quando se quer dar espaço entre elementos que estão em volta dele.
2. Para centralizar o componente, afinal com margin auto e width definido o componente vai ficar ao meio tanto horizontalmente quanto verticalmente.
Se usa Padding quando:
1. Quando não se quer que os elementos não toquem a borda
2. Quando se quer crescer o tamanho de um componente

Na minha visão esses são algumas diferenças entre usar margin e usar padding, também quando usar um ou outro, espero ter ajudado com esse conteúdo, comenta se você tem visões diferente da minha e se gostou desse pequeno post.

Obrigado!

Stay hard every day!

Ass: Italo Canturil

O FUTURO da performance no CSS

Italo Canturil — Tue, 13 Jul 2021 03:49:56 +0000

Para fazer uma imagem responsiva sempre foi um desafio, é ideal que imagens sempre tenha a mesma resolução do dispositivo do usuário.
Uma maneira de solucionar esse desafio é usando a função CSS image-set() , os navegadores baseados no Chromium já tinha suporte para ela desde 2012 e o Safari desde o Safari 6. Recentemente o Firefox passou a dar suporte a partir da versão 88, então vamos aprender mais sobre essa função que será a próxima geração de performance do CSS.

No HTML já se tinha o atributo srcset, o image-set() é equivalente a esse atributo onde confiamos no próprio navegador decidir qual melhor imagem para a resolução que o usuário está.

Image-set pode ser usado em três propriedades CSS diferentes, que são:

content
cursor
background-image

O mais usado é o background-image, um exemplo de uso:

.point {
  background-image: image-set("inflection.png" 1x, "inflection-2x.png" 2x);
}

Sendo o "1x" para telas com menores resoluções e o "2x" para telas com maiores resoluções. x vem de dppx que em inglês é dots per pixel unit, traduzindo seria algo em torno de pontos por pixel.
No Chrome/Edge/Opera e Samsung Internet é necessário adicionar o prefixo -webkit-. Já no Safari não precisa utilizar esse prefixo porém necessita usar a função url() para adicionar o caminho da imagem.

.point {
  /* Safari */
  background-image: url("platypus.png");

  /* Chrome/Edge/Opera/Samsung, Safari com função url() */
  background-image: -webkit-image-set(url("inflection.png") 1x, url("inflection-2x.png") 2x);

  /* Padrão */
  background-image: image-set("inflection.png" 1x, "inflection-2x.png" 2x);
}

Essa funcionalidade não é tão nova porém com o aumento do suporte é considerada a próxima geração de performance no CSS e que vai possibilitar usuários com dispositivos mais caros visualizarem a imagem mais nitidamente e também melhorar a performance para usuários que tem uma internet mais lenta ou com telas que requerem uma resolução menor.

DEV Community: Italo Canturil

Margin x Padding

Qual a diferença entre Margin e Padding?

Quando usar um ou outro?

O FUTURO da performance no CSS