Este manual ensinará o procedimento para criar espaço entre dois links.
Vamos começar!
Como dar espaço entre dois links em HTML e CSS?
Para dar espaço entre dois links, primeiro adicione os links necessários no arquivo HTML.
Etapa 1: adicionar links em HTML
Em HTML, vamos criar um container usando a tag
HTML
< div >< uma href = “https://linuxhint.com/create-html-file/” > Como criar um arquivo HTML? < / uma >
< uma href = “https://linuxhint.com/edit-html-file/” > Como editar um arquivo HTML? < / uma >
< / div >
A imagem a seguir mostra que os links foram adicionados com sucesso:
Etapa 2: estilize a div e o link
Nesta etapa, estilize o div e o link usando “ div ” em 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 background 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 da fonte : maior ;
altura : 150px ;
fundo : Preto ;
fronteira : 5px tracejadas rgb ( 251 , 255 , 0 ) ;
}
Usando o código acima, a saída a seguir é obtida. Como você pode ver, tanto o div quanto os links são estilizados:
Etapa 3: dar espaço entre dois links horizontalmente
Podemos dar espaço entre dois links horizontalmente usando HTML e CSS. Aqui, vamos explicar 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 inquebrável. 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 de espaços necessário.
Vamos passar para o exemplo para entender o conceito declarado!
Exemplo
Aqui, vamos escrever quatro vezes “ ” para criar espaço após o primeiro link de forma que o segundo link apareça após os quatro espaços.
HTML
< div >< uma href = “https://linuxhint.com/create-html-file/” > Como criar um arquivo HTML? < / uma >
Como editar um arquivo HTML?
Como você pode ver, o espaço é criado no lado direito do primeiro link:
Método 2: usando CSS
Em CSS, usaremos o “ margem direita ” para dar espaço entre dois links. O ' margem direita ” é utilizada para adicionar espaço do lado direito do elemento. Você também pode definir os valores negativos para ele.
Sintaxe
A sintaxe da propriedade margin-right é fornecida abaixo:
margem direita : valorNo lugar de ' valor ”, defina a margem do lado direito do elemento. Vamos continuar o exemplo.
Exemplo
Aqui, usaremos “ uma ” para acessar o link que criamos no HTML. Em seguida, defina o valor da propriedade margin-right como “ 50px ”:
uma {margem direita : 50px ;
}
O espaço é criado do lado direito do primeiro link, que pode ser visto abaixo:
Etapa 4: dar espaço entre dois links verticalmente
Para dar espaço vertical entre dois links, primeiro alinhe os links na forma vertical. Isso será feito usando o “ quadra ” valor do “ exibição ” propriedade e, em seguida, usando o “ altura da linha ” para dar espaço entre duas linhas de link.
Exemplo:
Aqui, vamos definir o valor da propriedade display como “ quadra ” para alinhar os links verticalmente. Em seguida, dê o espaço entre dois links definindo o valor da propriedade line-height como “ 80px ”:
uma {exibição : quadra ;
altura da linha : 80px ;
}
Como você pode ver, o espaço é criado usando a propriedade line-height:
É isso! Explicamos o método de dar espaço entre dois links em HTML e CSS.
Conclusão
O ' ”, “ margem direita ', e ' altura da linha ” 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.