O ' margem superior ” ajuda muitos desenvolvedores na criação de layouts responsivos e no posicionamento de elementos HTML. O uso da propriedade “margin-top” fornece mais controle sobre os elementos HTML, adiciona separação visual e ajuda na criação de designs responsivos melhores. Este guia demonstra a propriedade margin-top com implementação prática em CSS.
- O que é a Propriedade “margin-top”?
- Use a propriedade “margin-top” com um valor positivo
- Use a propriedade “margin-top” com um valor negativo
O que é a Propriedade “margin-top”?
O ' margem superior ” é utilizada para criar espaço extra entre os elementos HTML. Pode ser definido com valores positivos e negativos. Esses valores são definidos de acordo com as necessidades do design e ajudam a evitar sobreposições e ajustar o espaçamento entre os elementos HTML.
Como usar a propriedade “margin-top” com um valor positivo?
A propriedade “margin-top” com um valor positivo adiciona espaçamento extra da posição superior em direção ao centro do elemento HTML selecionado. O valor fornecido pode ser em pixels, porcentagem, rem ou em valores globais como auto, herdado, não configurado, etc. Vamos ver um exemplo para melhor compreensão:
Exemplo: Utilização do Valor Positivo
Vamos assumir um arquivo HTML que cria um “ Após a criação da estrutura HTML, aplique as propriedades CSS ao “ positivo ' aula: No trecho de código acima: Após a execução do trecho de código acima, a página da Web fica assim: O gif acima ilustra o efeito de definir o valor da propriedade margin-top na página da web. O ' margem superior ” com um valor negativo define espaçamento extra da posição superior oposta ao centro ou na direção da parte externa da página em relação ao elemento HTML selecionado. É mais utilizado para criar efeitos de sobreposição ou no posicionamento do elemento HTML. Vamos a um exemplo para melhor compreensão. Exemplo: Utilização de Valor Negativo Vamos assumir um arquivo HTML que cria um “ A descrição do trecho de código acima indicado é descrita abaixo: Após a execução do trecho de código acima, a página da Web aparece assim: O gif acima exibe o efeito que ocorre no design da página da Web, definindo o valor negativo para a propriedade margin-top. O ' margem superior ” é utilizada para criar espaço extra entre os elementos HTML. Pode ser definido com valores positivos e negativos. Se a propriedade “margin-top” for atribuída com um valor positivo, o espaço extra será adicionado em direção ao centro da página da Web ou elemento HTML selecionado. No caso de um valor “negativo” o espaço é adicionado, mas para o lado de fora da página. Este artigo demonstra o que é a propriedade margin-top em CSS.
< corpo >
< div aula = 'positivo' >
< p > O topo da margem com um valor positivo é atribuído p >
div >
corpo >
< estilo >
.positivo {
largura: 300px;
altura: 200px;
cor de fundo: verde floresta;
tamanho da fonte: 20px;
cor: #fff;
margem superior: 50px;
}
estilo >
Como usar a propriedade “margin-top” com um valor negativo?
.negativo {
cor branca;
alinhamento de texto: centro;
cor de fundo: vermelho ;
margem superior: -30px ;
preenchimento: 30px;
altura: 100px;
}
estilo >
< corpo >
< div aula = 'negativo' >
O valor negativo é atribuído para Propriedade no topo da margem
div >
corpo >
Conclusão