CSS Padding vs. Margem

Dentro do HTML, precisamos de CSS para estilizar páginas da web dinâmicas ou estáticas. O CSS Styling fornece à nossa página uma visão estética. A estética de qualquer página da web depende muito das margens e dos padrões usados ​​no estilo CSS. Preenchimento refere -se ao espaço dado por uma propriedade de preenchimento a qualquer elemento específico à sua fronteira. Enquanto a margem se refere ao espaço entre a borda de um elemento sobre a borda do outro elemento ou a parte superior da página, a parte inferior da página, a esquerda da página e a direita da página. Se você não souber a diferença entre a propriedade da margem e a propriedade de preenchimento do CSS no HTML, este artigo irá ajudá -lo a obter conhecimento básico.

Exemplo # 01:

Vamos começar com o primeiro exemplo de uso dos exemplos HTML para elaborar a diferença entre a propriedade da margem e a propriedade de preenchimento. Estaremos visualizando o uso da propriedade da margem primeiro. Então, precisamos formar um novo arquivo HTML com a extensão "html". Temos que abri -lo em qualquer ferramenta de programação como o Código do Visual Studio. Iniciamos o código HTML com a tag "html" que será encerrada no último de todas as tags. Após o início da tag html, estamos iniciando a etiqueta da cabeça para colocar as outras tags relacionadas dentro dela.

Adicionamos a tag de título para criar um novo título para a nossa página da web html (i.e., Margem.) Após a etiqueta do título, adicionamos a tag "estilo" na etiqueta principal deste arquivo HTML que foi usado para estilizar a página da web html. Teremos um disfarce na etiqueta de elegância após a elaboração de uma etiqueta corporal. Temos usado a etiqueta "corpo" depois que o título da cabeça foi fechado. A etiqueta corporal contém 2 tags de cabeçalho para o maior título “1º” (i.e. H1.) Esses títulos contêm títulos diferentes dentro deles, como mostrado abaixo. Especificamos duas classes diferentes para os títulos separadamente para P1 e P2. As classes P1 e P2 serão utilizadas para estilizar o 1º e o 2º cabeçalho, respectivamente, em diferentes formatos de estilo.

A etiqueta corporal junto com a tag html principal foi fechada aqui, como você pode ver na imagem do código do Visual Studio. Usamos as classes P1 e P2 aqui para estilizar os dois títulos separadamente. Usamos a propriedade da fronteira para adicionar a borda azul sólida de 2 pixels em torno dos títulos. A propriedade da margem foi usada aqui para adicionar margens de 100 pixels para a direção 1 de todos os seus lados e adicionar margens de 50 pixels para a direção 2 de todos os seus lados. O código da página HTML foi concluído para exibir o uso da propriedade Margem. Vamos salvá -lo primeiro e depois executá -lo em um navegador. Você pode selecionar qualquer navegador de sua escolha (eu.e., Chrome, Mozilla, Opera e etc.)

Depois de executar este arquivo diretamente no navegador do Google Chrome, temos o resultado abaixo. Ele exibiu os dois títulos de tamanho "1" na tela da página da web com uma borda sólida azul. Como aplicamos a propriedade de margem em ambos os títulos, a primeira borda do cabeçalho foi localizada 100 pixels longe de sua página superior, inferior, esquerda e direita. Além disso, o segundo cabeçalho é de 50 pixels longe da esquerda, direita, inferior e superior (em relação à cabeça 1). É assim que uma margem pode abrir espaço entre a borda de um elemento borda para outra.

Vamos atualizar o mesmo código HTML um pouco para fornecer uma aparência diversificada à página HTML. Temos usado o mesmo arquivo com o título "margem", como mostrado abaixo. A etiqueta de estilo foi iniciada após o final de uma etiqueta de título. Temos utilizado a classe P1 para a direção 1 e P2 para o cabeçalho 2. Dentro do Padmargin.Arquivo HTML, usamos as duas classes P1 e P2 em seu estilo. Atribuímos o mesmo valor de uma borda azul sólida para títulos que fizemos na ilustração acima. Depois disso, especificamos a margem superior e a propriedade da margem inferior para o primeiro título do tamanho 1 e demos a ambas as propriedades um valor de 50 pixels. Depois disso, especificamos a margem esquerda e o espaço da margem direita de 30 pixels para o título 2 de tamanho "1". Isso significa que haverá menos espaço à esquerda e à direita de um título em comparação com as margens superior e inferior. Vamos salvar este código para executar.

Depois de executar o arquivo HTML no Visual Studio e abri -lo no navegador Chrome, o resultado foi exibido. O primeiro cabeçalho contém a margem de 50 pixels de sua parte superior e inferior, enquanto o segundo título contém a margem de 30 % esquerda e direita em relação a esta página e a cabeçalho acima. É assim que a margem pode ser aplicada a diferentes tags.

Exemplo # 02:

Estaremos olhando para o preenchimento em comparação com as margens. Temos usado os dois títulos do tamanho 1 dentro da etiqueta corporal deste arquivo, começando com seus nomes de classe especificados, P1 e P2. Antes do uso da etiqueta corporal, usaremos a etiqueta da cabeça neste arquivo html. Esta tag contém a etiqueta do título e a tag de estilo. A tag de título foi dada para nomear a página HTML como margem. A tag de estilo é usada para aplicar CSS aos elementos HTML. Aplicamos a borda azul de 2 pixels em ambos os títulos na etiqueta do corpo. Além disso, aplicamos a margem de 10 % a todos os lados de um cabeçalho com uma classe P1, enquanto 10 % preenchem o segundo título que contém a classe P2. Até agora, fizemos isso para verificar a diferença entre a margem e as atualizações de preenchimento nos títulos separadamente no mesmo arquivo.

Depois de salvar este código HTML, estamos executando -o no código do Visual Studio. Este arquivo será executado no navegador do Google Chrome. Para ver o resultado, temos a saída abaixo. A diferença entre a propriedade da margem e a propriedade de estofamento do CSS foi clara. O primeiro cabeçalho contém a margem de 10 % de sua fronteira para o restante de sua página. Enquanto o preenchimento recebe 10 % de espaço entre o cabeçalho e sua fronteira.

Conclusão:

Explicamos a diferença entre a margem e as propriedades de preenchimento do estilo CSS no HTML. Demonstra que o preenchimento está entre a fronteira e o elemento enquanto a margem está entre a borda e o resto da página. O primeiro exemplo foi demonstrar o uso de margens muito evidentemente, enquanto o último exemplo mostrou a diferença no preenchimento em relação às margens.