Este artigo demonstra:
- Como funcionam as margens negativas no CSS?
- Usando a propriedade superior de margem negativa
- Usando a propriedade inferior da margem negativa
- Usando propriedade de direita de margem negativa
- Usando a propriedade Negative Margin Left
- Por que margin-top: -5 != margin-bottom: 5?
Como funcionam as margens negativas no CSS?
A margem negativa move o conteúdo para fora da página. O método de usar uma margem negativa é o mesmo que o positivo, exceto que o “-” é usado com o valor. Siga as variações abaixo mencionadas da margem negativa:
Ficheiro HTML Existente Depois de compilar o código acima, a saída se parece com: O ' ” está na parte inferior da página da Web antes de aplicar uma margem negativa. Adicionar ' margem superior ” propriedade para o “ ” elemento e dê seu valor em negativo. Por exemplo, aqui -15% é o valor da propriedade margin-top: Depois de executar o código, a página da Web ficará assim: A saída mostra que o margin-top negativo faz com que o elemento “ Aplique as mesmas propriedades acima e apenas altere o “ margem inferior ' propriedade. Depois disso, adicione uma imagem na parte inferior do elemento “ Depois de atualizar o código, nossa página da Web fica assim: A saída acima mostra que o texto está obtendo a margem inferior de -5%. Ao atribuir -55% do valor da propriedade margin-right ao elemento Depois de executar a saída do código, fique assim: A saída mostra que o texto está obtendo a margem negativa correta. A propriedade margin-left com um valor negativo funciona da mesma maneira. No código abaixo, o elemento “ A saída do código acima é: É assim que a margem negativa funciona no CSS. Quando o ' margem inferior: 5% ” é usado adiciona uma margem do lado inferior em direção ao centro do elemento, mas quando “ margem superior: -5% ” é usado adiciona uma margem de 5% a partir do topo, mas na direção oposta (fora da página). No CSS, a margem negativa funciona na direção oposta, atribuindo o valor da margem. Ele move o conteúdo do elemento na direção externa/fora da página. O “margin-top:-5″ não é igual a “margin-bottom:5” porque ambos os valores de propriedade movem o conteúdo em direções opostas correspondentes à posição pai. Este artigo demonstrou com sucesso como funciona a margem negativa.
O ' livro.jpg ” é a imagem armazenada no diretório local, seu caminho é fornecido como o “ origem ' valor. O ' largura ' e ' altura ” da imagem são definidos como 50%. Agora crie um “
= '../livro.jpg' altura = 'cinquenta%' ; largura = 'cinquenta%' >
estilo
>
Usando a propriedade superior de margem negativa
= '../livro.jpg' altura = 'cinquenta%' ; largura = 'cinquenta%' >
estilo
>
” seja exibido na frente do elemento pai.
Usando a propriedade inferior da margem negativa
< h3 estilo = 'cor: preto; margem inferior: -5%;' > Bem-vindo ao Linuxhint h3 >
div >
< img origem = '../livro.jpg' altura = 'cinquenta%' ; largura = 'cinquenta%' >
Usando propriedade de direita de margem negativa
, ele se move na direção oposta:
< div estilo = 'cor de fundo:dodgerblue;' >
< h3 estilo = 'cor: preto; margem esquerda: -55%; ' > Bem-vindo ao Linuxhint < / h3 >
< / div >
< img origem = '../livro.jpg' altura = 'cinquenta%' ; largura = 'cinquenta%' >
Usando a propriedade Negative Margin Left
” se move 50% para o lado esquerdo na direção oposta à propriedade margin-left:
'cor de fundo:dodgerblue;' >
estilo
>
= '../livro.jpg' altura = 'cinquenta%' ; largura = 'cinquenta%' >
Por que margin-top:-5 != margin-bottom:5?
Conclusão