As imagens são usadas para melhorar a aparência das páginas da web e projetá -las efetivamente. Como desenvolvedor da web, o HTML permite adicionar várias imagens e estilizá -las no seu site. No entanto, essas imagens são espaçadas de perto por padrão, mas você pode personalizar o espaço com CSS de acordo com suas preferências.

Neste artigo, aprenderemos:

• Adicione espaço entre imagens usando “grade”
• Adicione espaço entre imagens usando “flex”
• Adicione espaço entre imagens usando “margem”

Para criar espaço entre imagens, primeiro, confira o método para adicionar imagens no HTML e depois criaremos espaço entre eles.

Então vamos começar!

Como adicionar imagens no div?

Para adicionar imagens na div, primeiro, criaremos um contêiner usando o “”Tag e atribua o nome da classe como“div”. Dentro da tag, vamos adicionar um título

. Em seguida, crie um nome de classe subdiv como “img”Em que adicionaremos seis imagens usando a tag e especificaremos a fonte de imagem.

Html

Adicione espaço entre imagens

No arquivo CSS, use “div”Para acessar o contêiner criado em HTML. Vamos ajustar a altura da div como “auto”Para permitir que o div se organize automaticamente de acordo com seus elementos. Para estilizar a div, adicione a cor de fundo como “RGB (170, 138, 172)”E defina a largura da borda como“10px", Estilo como"sulco”E cor como“RGB (77, 0, 80)”. Também definiremos a cor do cabeçalho como “RGB (77, 0, 80)”.

CSS

div
Altura: Auto;
Antecedentes: RGB (170, 138, 172);
borda: groove 10px RGB (77, 0, 80);
Cor: RGB (77, 0, 80);

Aqui, você pode ver que as imagens são adicionadas na div, mas elas não estão organizadas e não têm espaço igual entre elas:

Agora, criaremos espaço entre essas imagens usando três métodos diferentes.

Método 1: Adicione espaço entre imagens usando “grade”

Para adicionar espaço entre imagens, use o CSS “mostrar”Propriedade e defina seus valores como“grade”, Que ajustará o elemento em um recipiente de grade.

Sintaxe

A sintaxe da propriedade Display é:

Exibição: grade;

Vamos continuar o exemplo anterior e criar espaço entre imagens.

Exemplo

Vamos definir o valor da propriedade de exibição como “grade”Para exibir imagens em forma de grade. Em seguida, crie três colunas usando o “colunas de grade-template”Propriedade e três linhas usando o“ROAS DE TEMPLAÇÃO DE GRIDA”. Em seguida, defina as frações como “1fr","1fr", e "1fr”Para linhas e colunas, o que significa que eles adquiriram espaço igual. Depois disso, utilize o “Gap de coluna" e "ROW-GAP”Propriedades para criar um espaço e definir seu valor como“25px”:

img
Exibição: grade;
colunas da grade-template: 1fr 1fr 1fr;
ROAS DE TEMPO DE GRIDA: 1FR 1FR 1FR;
Linha de linha: 25px;
coluna Gap: 25px;

Aqui, você pode ver que o espaço é criado entre as imagens, mas quando redimensionamos o navegador, ele afeta o layout das imagens:

Vamos mudar para o segundo método!

Método 2: Adicione espaço entre imagens usando “flex”

Como parte do CSS, a propriedade Display pode ser definida como “flex”. Esse recurso permite a flexibilidade e ajuste do conteúdo ou elementos. Ele também cria espaço igual entre os elementos, permitindo que os elementos sejam organizados com eficiência.

Sintaxe

Exibição: flex

De acordo com a sintaxe acima, o valor da propriedade de exibição é definido como “flex”.

Então, vamos conferir o exemplo para adicionar espaço entre imagens usando flex.

Exemplo

Continuaremos o exemplo anterior e definiremos três imagens na div. Depois disso, defina o valor da propriedade de exibição como “flex”E a lacuna entre os ícones como“25px”Usando o“brecha" propriedade:

.img
exibição: flex;
Gap: 25px;

Você pode observar que as imagens são separadas pelo espaço, mas quando o navegador é redimensionado, as imagens são cortadas das bordas:

Para superar a limitação acima mencionada, o “margem”Propriedade é usada.

Método 3: Adicione espaço entre imagens usando “margem”

Usando o “margem”Propriedade, você pode criar espaço entre imagens no CSS. Adiciona uma área transparente em torno de um elemento. Você pode definir a margem da lateral esquerda, direita, superior e inferior de um elemento. Mais especificamente, é uma propriedade abreviada para “margem-esquerda","Margem-direita","margin-top", e "Margin-Bottom”. Todos os valores das propriedades fornecidas podem ser definidas em uma linha.

Sintaxe

Sintaxe da propriedade Margem é:

Margem: Auto | superior direito esquerdo inferior esquerdo

A descrição da sintaxe fornecida acima é dada abaixo:

• auto: É utilizado para ajustar elementos de acordo com o navegador.
• principal: Especifica a margem do topo.
• certo: É usado para definir a margem da direita.
• botão: É usado para ajustar a margem de baixo.
• esquerda: Especifica a margem da esquerda.

Observação: A adição de dois valores especificará as margens da parte superior e inferior, bem como da esquerda e da direita; No entanto, acrescentar um valor aplicará a margem aos quatro lados.

Continuando o exemplo anterior, agora criaremos espaço entre imagens.

Exemplo

Aqui, vamos usar “img”Para acessar as imagens adicionadas no HTML e definir a largura e a altura das imagens como“150px”. Depois disso, definiremos o margin-top como “0px”, Margem-direita como“10px”, Margin-Bottom como“30px”E margem-esquerda como“20px”:

img
Largura: 180px;
Altura: 180px;
margem: 0px 10px 30px 20px;

A saída dada demonstra que o espaço é criado e o layout das imagens não é perturbado, ou as imagens não são cortadas quando o navegador é redimensionado:

É isso! Explicamos o método para adicionar espaço entre imagens usando três métodos diferentes.

Conclusão

Três métodos diferentes de CSS podem ser usados ​​para criar espaçamento entre imagens, a saber, o “grade" e "flex”Valores da propriedade Display e o“margem" propriedade. Com essas propriedades, você pode criar espaços entre imagens. No entanto, a propriedade da margem CSS funciona da melhor maneira possível. Neste manual, explicamos esses três métodos em detalhes e fornecemos exemplos para cada método.