CSS Poftding Top

“Você já ouviu falar sobre o conceito de preenchimento ao estudar programação em HTML em seus estudos? Caso contrário, então você está no lugar certo. HTML refere -se a "linguagem de marcação de texto hiper" e é usado para dar aos sites uma aparência estável. Ele criou o estilo CSS mencionado como a “folha de estilo em cascata.”O CSS dá ao site uma aparência visual atraente. O estilo CSS pode ser usado para fornecer a um site uma nova aparência e sensação, como espaçar a esquerda ou direita, aplicar uma cor de fundo, dividindo a página em segmentos e assim por diante. Uma das características do CSS é "preenchimento", que é usado para adicionar espaço entre o conteúdo do elemento e sua borda. O artigo de hoje cobrirá o uso do recurso CSS Padding-top no script de estilo CSS enquanto cria uma página estática HTML. Então, vamos começar com alguns dos exemplos simples de html.”

Exemplo # 01

Vamos dar nosso primeiro exemplo de html para criar uma página estática com alguns títulos e estilizá -los com a ajuda de um estilo CSS no código do Visual Studio. Então, criamos um novo arquivo de bloco de notas chamado "Padding-top" com a extensão "html" no final. Iniciamos este documento "html" com a tag "html" necessária para fazer o arquivo html funcionar. A etiqueta principal deste documento contém a etiqueta "Title" junto com seu título "Top Padding", conforme exibido. Estaremos discutindo a tag "estilo" no final. A etiqueta corporal será iniciada com o uso de 4 tags de título.

Todos esses títulos serão 1^st títulos, i.e., o maior título de tamanho de acordo com o HTML. Todos os títulos conterão títulos de título diferentes especificados dentro deles. Especificamos três classes diferentes para os últimos três títulos, eu.e., P1, P2 e P3. Essas classes serão utilizadas na tag de estilo para especificar o estilo para cada cabeçalho separadamente. O corpo e a tag html foram encerrados aqui após o uso de títulos. Dentro da etiqueta de estilo acima da etiqueta "Body", definimos um estilo para cada aula de título separadamente em três linhas, eu.e., P1, P2, P3.

Usamos a opção de borda para definir uma borda azul sólida de 2 pixels para cada tabela, eu.e., PX significa Pixel. Estamos definindo o recurso de preenchimento aqui para todos os três títulos contendo P1, P2 e P3 separadamente. O primeiro título conterá o preenchimento de 100 pixels de cima, o segundo título conterá o preenchimento superior de 50 pixels, e o último título conterá o preenchimento superior de 10 pixels do respectivo título acima. O estilo e a etiqueta da cabeça serão concluídos aqui, e estaremos salvando este código para executá -lo usando o botão "Executar". Será aberto no navegador para ver seu resultado.

A seguinte página mostrada-amante com o título “Top preenchimento” foi aberta na tela do navegador. O primeiro título foi exibido sem fronteira e estofamento, eu.e., cabeçalho normal. Enquanto o 2^nd, 3º e 4^º Os títulos contêm a borda azul ao redor deles. O 2^nd O cabeçalho tem 100 pixels de preenchimento de sua fronteira, os 3^rd A direção contém o preenchimento de 50 pixels da fronteira e o 4^º O cabeçalho contém preenchimento de 10 pixels de sua borda azul. Você pode entender a variação usando os valores diferentes para o topo de preenchimento através dos “pixels.”

Exemplo # 02

Vamos ter outro exemplo semelhante para adicionar preenchimento no topo de qualquer aspecto html. Então, usaremos a opção percentual em vez de pixel desta vez. Este arquivo foi iniciado com a tag html seguida pela tag de cabeça e título. O mesmo rótulo foi especificado neste arquivo. Temos usado apenas três títulos dentro da etiqueta corporal deste arquivo html. Todos os três títulos contêm as mesmas três classes, P1, P2 e P3, para uso no estilo.

Dentro da etiqueta "estilo", usamos as classes P1, P2 e P3 para cada um para estilizá -las separadamente. Usamos a mesma propriedade de fronteira azul sólida de 2 pixels para todos os três títulos. Depois disso, usamos a propriedade de preenchimento para definir valores diferentes para o preenchimento de títulos de suas fronteiras. O primeiro cabeçalho conterá 20 % de preenchimento de topo por sua fronteira. O segundo será acolchoado 15 % do topo de sua fronteira, e o último cabeçalho ficará a 5 % de sua fronteira do lado superior. Vamos salvar este programa e executá -lo para ver os resultados.

Depois de executar este código HTML para ilustrar a propriedade de preenchimento com o valor numérico percentual, obtivemos a saída mostrada do abastecimento no navegador Chrome. Esta página contém um total de 3 títulos com bordas sólidas azuis ao seu redor. O primeiro conteúdo do cabeçalho fica a 20 % de sua fronteira, eu.e., 20 % de preenchimento superior. O segundo título fica a 15 % da fronteira que ele contém, eu.e., 15 % de preenchimento. O último cabeçalho contém 5 % de preenchimento de sua borda sólida azul, como demonstrado na imagem abaixo. Há uma clara diferença entre os títulos de saída usando os diferentes valores para o preenchimento superior.

A unidade “Em” também pode ser usada para a inserção do preenchimento. A unidade “em” pode ser usada para dar o preenchimento ao elemento 2 vezes o tamanho do conteúdo do elemento. Digamos que temos os mesmos três cabeçalhos no corpo do arquivo HTML, e usamos os valores 5EM, 3EM e 1EM para a propriedade Top-top, conforme exibido abaixo.

A saída para o uso da unidade “EM” para adicionar preenchimento superior foi mostrada abaixo. Os 5em, 3em e 1em são valores relativamente maiores que as unidades "px" e "%".

Exemplo # 03

Vamos ter o último exemplo para demonstrar o uso da propriedade Top-top em arquivos CSS ou HTML. Então, faremos uma comparação entre as propriedades de preenchimento e outras propriedades relacionadas, como direita, esquerda e inferior. Temos usado os títulos "H1" com um título de título um pouco diferente, como mostrado na etiqueta corporal deste arquivo html. Dentro da tag "estilo", definimos as classes P1, P2 e P3 para cada cabeçalho para definir o valor da borda e preenchimento. Temos usado a mesma borda azul sólida de 1 pixel para todos os três títulos.

Depois disso, usamos os valores esquerda, direita, superior e inferior separadamente para cada cabeçalho. Primeiro, o cabeçalho utilizará 10% de preenchimento para todos os seus lados, enquanto o segundo título contém 10% de preenchimento de todos os seus lados. O último cabeçalho conterá 2em preenchimento para todos os seus lados.

A saída para o código HTML tem mostrado o preenchimento para cada cabeçalho de cima, inferior, esquerda e direita da borda.

Conclusão

A introdução deste artigo é sobre o uso do estilo CSS e o uso da propriedade "preenchimento" no arquivo html. Demonstramos os exemplos que contêm o uso da propriedade do CSS para adicionar o preenchimento do topo de um elemento de sua borda. Para isso, tentamos o "PX" para pixels, "%" para porcentagem e o "EM" para a multiplicação de um tamanho de elemento com o valor específico para adicionar preenchimento. Os exemplos ilustrados aqui são bastante simples e fáceis de usar. Portanto, qualquer iniciante pode se adaptar a esses exemplos a qualquer momento.