No HTML, os botões são elementos clicáveis ​​usados ​​para executar uma ação específica. A maioria dos botões é colocada perto um do outro, mas você pode dar espaço entre dois botões usando a propriedade de margem do CSS. Para isso, você pode usar a propriedade Margin-Left ou a propriedade da margem-direita.

Neste artigo, você aprenderá a dar espaço entre dois botões com a ajuda do CSS. Mas, primeiro, aprenda sobre as propriedades da margem-esquerda e da derrota de margem uma por uma. Então vamos começar!

O que é a propriedade CSS “margem-esquerda”?

No CSS, “margem-esquerda”A propriedade é utilizada para criar espaço a partir do lado esquerdo dos elementos. O elemento estará mais longe de seus vizinhos se o valor for positivo, enquanto se tornará mais próximo de seus vizinhos se o valor especificado for negativo.

Sintaxe

A sintaxe da propriedade Margin-Left é a seguinte:

margem-esquerda: valor

No lugar de "valor”, Defina a margem que deseja dar ao elemento do lado esquerdo.

O que é a propriedade CSS "Margin-Right"?

O "Margem-direita”A propriedade do CSS é utilizada para criar espaço do lado direito do elemento. Posiciona a área de margem no lado direito do elemento. O valor padrão da propriedade margem-direita é definido como zero; No entanto, você pode especificar valores positivos e negativos para isso.

Sintaxe

A sintaxe da propriedade da margem-direita é dada abaixo:

Margem-direita: valor

Coloque o "valor”Que você deseja definir como a margem do lado direito do elemento.

Como dar espaço entre dois botões?

Você pode criar espaço entre dois botões usando o “margem-esquerda" e "Margem-direita”Propriedades. Para fazer isso, na seção HTML, adicionaremos um título usando

e crie dois botões com o nome da classe “BTN1" e "BTN2”, Respectivamente.

Html

Crie espaço entre dois botões

Clique em mim
Clique em mim

O resultado padrão do código fornecido é:

Agora, vá para o CSS para criar espaço entre esses dois botões.

Exemplo 1: Dando espaço entre dois botões usando a propriedade de margem-direita

Aqui, use “.BTN1”Para acessar o primeiro botão adicionado no HTML e definir o valor da propriedade da margem-direita como“100px”.

CSS

.BTN1
Margem-direita: 100px;

Como você pode ver, o espaço é criado no lado direito do primeiro botão:

No próximo exemplo, usaremos o “margem-esquerda”Propriedade para criar espaço entre dois botões.

Exemplo 2: Dando espaço entre dois botões usando a propriedade Margin-Left

Nós vamos usar ".BTN2”Para acessar o segundo botão criado no arquivo HTML e atribuir o valor da propriedade Margin-Left como“50px”:

.BTN2
margem-esquerda: 50px;

Ao fazer isso, o espaço é criado no lado esquerdo do segundo botão, que pode ser visto abaixo:

Deseja usar as duas propriedades de uma só vez? Confira o próximo exemplo!

Exemplo 3: Dando espaço entre dois botões usando propriedades margin-esquerdas e de margem-direita

Você também pode definir a margem de ambos os botões para dar espaço entre eles. Para fazer isso, criaremos o espaço do lado direito do primeiro botão e do lado esquerdo do segundo botão usando propriedades de margem-direita e margem-esquerda, respectivamente:

.BTN1
Margem-direita: 70px;

.BTN2
margem-esquerda: 70px;

Saída

Fornecemos o método mais simples relacionado a dar espaço entre dois botões no CSS.

Conclusão

““margem-esquerda" e "Margem-direita”Propriedades do CSS são usadas para dar espaço entre dois botões. Usando isso, você pode ajustar o espaço dos lados direito e esquerdo dos botões. Neste artigo, explicamos como dar espaço entre dois botões usando dois métodos diferentes e fornecemos exemplos para cada um deles.