Como dar espaço entre dois links em html & css?

No HTML, os links são hiperlinks que podem levá -lo a outros sites. Os links geralmente conectam recursos da Web, como imagens, vídeos, arquivos PDF ou páginas da Web. HTML usa o “”Tag para criar links especificando o URL e vinculando texto. Quando você adiciona dois links no HTML, por padrão, eles são colocados lado a lado sem nenhum espaço.

Este manual ensinará o procedimento para criar espaço entre dois links.

Vamos começar!

Como dar espaço entre dois links em html & css?

Para dar espaço entre dois links, antes de tudo, adicione os links necessários no arquivo html.

Etapa 1: Adicione links em HTML

No HTML, criaremos um contêiner usando a tag e dois links com a ajuda da tag. Aqui, uma referência de hiperlink é usada para fornecer o endereço do site e fornecer o hiperlink necessário. Além do endereço, especifique o nome do link porque o link não aparece no site. Ele só exibirá o nome ou a legenda que atribuímos.

Html

Como criar um arquivo HTML?
Como editar um arquivo HTML?

A imagem a seguir mostra que os links foram adicionados com sucesso:

Etapa 2: estilo o div & link

Nesta etapa, estilize o div e o link usando “div”No CSS. Vamos ajustar o preenchimento para “40px”E defina o tamanho da fonte dos links como“maior", A altura da div é definida como"150px”E use a propriedade em segundo plano e defina a cor da div como“preto”. Depois disso, ajuste a largura da borda como “5px", Estilo como"tracejadas"E cor como"RGB (251, 255, 0)”.

CSS

div
preenchimento: 40px;
tamanho de fonte: maior;
Altura: 150px;
Antecedentes: preto;
borda: 5px RGB tracejado (251, 255, 0);

Usando o código acima, a seguinte saída é obtida. Como você pode ver, tanto a div e os links são estilizados:

Etapa 3: Dê espaço entre dois links horizontalmente

Podemos dar espaço entre dois links horizontalmente usando HTML e CSS. Aqui, explicaremos os dois métodos um por um.

Método 1: Usando HTML

Para dar espaço entre os links sem escrever nenhum CSS externo, você pode usar “”No HTML, onde você deseja criar espaço. ““”Significa espaço sem quebra. No arquivo html, adicionar um significa um espaço. Se você quiser dar mais espaço, não é preferível adicionar manualmente de acordo com o número necessário de espaços.

Vamos passar para o exemplo para entender o conceito declarado!

Exemplo

Aqui, escreveremos quatro vezes “”Para criar espaço após o primeiro link de tal maneira que o segundo link aparecerá após os quatro espaços.

Html

Como criar um arquivo HTML?
Como editar um arquivo HTML?

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

Método 2: Usando CSS

No CSS, usaremos o “Margem-direita”Propriedade para dar espaço entre dois links. O "Margem-direita”A propriedade é utilizada para adicionar espaço do lado direito do elemento. Você também pode definir os valores negativos para isso.

Sintaxe

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

Margem-direita: valor

No lugar de "valor”, Defina a margem do lado direito do elemento. Vamos continuar o exemplo.

Exemplo

Aqui, vamos usar “a”Para acessar o link que criamos no HTML. Em seguida, defina o valor da propriedade da margem-direita como “50px”:

a
Margem-direita: 50px;

O espaço é criado do lado direito do primeiro link, que pode ser visto abaixo:

Etapa 4: dê espaço entre dois links verticalmente

Para dar espaço vertical entre dois links, os primeiros links alinhados em forma vertical. Isso será feito usando o “bloquear”Valor do“mostrar”Propriedade e, em seguida, usando o“altura da linha”Propriedade para dar espaço entre duas linhas de link.

Exemplo:

Aqui, definiremos o valor da propriedade de exibição como “bloquear”Para alinhar links verticalmente. Em seguida, dê o espaço entre dois links, definindo o valor da propriedade de altura de linha como “80px”:

a
exibição: bloco;
altura da linha: 80px;

Como você pode ver, o espaço é criado usando a propriedade de altura de linha:

É isso! Explicamos o método de dar espaço entre dois links em HTML & CSS.

Conclusão

O "","Margem-direita", e "altura da linha”As propriedades do CSS são usadas para dar espaço horizontal e vertical entre dois links. Usando isso, você pode ajustar o espaço dos lados direito e esquerdo dos links. Neste artigo, explicamos o procedimento para dar espaço entre dois links usando dois métodos diferentes e fornecemos exemplos relacionados.