Propriedade CSS Padding-Left

Se você já foi estudante de uma programação da web, deve ter experimentado os códigos HTML e CSS. HTML é a linguagem de marcação de hipertexto usada para fornecer a aparência estática para as páginas da web. Enquanto o CSS significa Cascading Style Sheet para fornecer a aparência estética na página da web. A formatação CSS permite adicionar uma aparência diferente à página da web, eu.e. Adicionando registros, preenchendo as propriedades esquerda ou direita, adicionando a cor de fundo, dividindo a página em seções e muito mais. Dentro deste tutorial, discutiremos sobre o uso da opção CSS Padding-Left no código do estilo CSS, I I.e. Provavelmente movendo dados para a esquerda.

Exemplo #01:

Vamos começar com o primeiro exemplo de uso da propriedade Padding-Left no CSS de um arquivo HTML. Para isso, você precisa criar um novo arquivo de bloco de notas “preenchimento” com o “.HTML ”extensão no fim. Este arquivo pode ser usado no bloco de notas ou em qualquer ferramenta de idioma como o código do Visual Studio, como o que fizemos na imagem a seguir. Iniciamos este arquivo de código HTML com a tag Standard HTML “”, seguida pela etiqueta da cabeça.

A etiqueta da cabeça também pode conter a etiqueta do título. Por enquanto, evitamos o uso da tag de título. Dentro da etiqueta da cabeça, usamos a tag de estilo para usar o estilo CSS no arquivo html. A etiqueta corporal segue as etiquetas da cabeça a partir da cabeça 1 até a direção 6. Dentro da abertura dos títulos, usamos a classe "PG" como identificador para usar a tag de estilo. Dentro da tag de estilo, usamos o objeto de classe "PG" para cada cabeçalho para estilo. Dentro dos colchetes encaracolados, usamos a propriedade de preenchimento de CSS e o colocamos para 100 pixels deixados no início da linha. Isso significa que nossos títulos são colocados a 100 pixels longe do início da linha, em vez de serem colocados no início da linha. O estilo e a etiqueta da cabeça estão concluídos aqui.

Depois de salvar o código HTML anterior, começamos a depurar. Como este arquivo contém o “.Extensão HTML ”, é aberta diretamente dentro do navegador padrão que você selecionou na primeira execução. A saída a seguir é exibida na página do navegador, contendo um total de 6 títulos colocados à distância de 100 pixels da esquerda no início de cada linha. Se removermos o preenchimento esquerdo da etiqueta de estilo, os títulos começam desde o início de uma linha.

Exemplo #02:

Vamos voltar ao código HTML e atualizá -lo um pouco como mostrado no seguinte. Adicionamos um único título "H1" no corpo seguindo as tags "div". As tags "div" são usadas para dividir a página em seções. A primeira tag "div" é instanciada com a tag "id = div" e a tag "div" interna contém a classe "Greydiv" para distingui -la. Esta tag "div" contém uma frase simples, afirmando que esta seção "div" é colocada a 500 pixels da esquerda. Agora, dentro da etiqueta de estilo da etiqueta "Head", definimos a propriedade cor de fundo "rosa" para a página da web e colocamos o título 1 à distância de 500 pixels do seu ponto de partida usando a opção de preenchimento de preenchimento. Depois disso, adicionamos a altura e a cor de fundo para a primeira seção “div” de toda essa página. A seção interna de “div” utilizada pela classe “Greydiv” é usada para definir a largura “900” para esta seção interna de div com a propriedade de cor de fundo definida como “Lightgrey” e a opção de preenchimento para 500 pixels.

Isso significa que a seção interna da DIV “o valor do texto” é colocada a 500 pixels do lado esquerdo da página. O estilo CSS é feito aqui e este código está pronto para usar. Vamos salvar este código usando o Ctrl+S e executar este código usando o botão "Executar" na barra de tarefas do código do Visual Studio. O código é executado e o navegador é aberto para exibir o resultado para este código HTML.

A página do Chrome mostra a saída para este código HTML, como mostrado na imagem a seguir. Isso mostra que a cor da página está definida como rosa e a primeira seção "div" é adicionada após a cabeçadeira 1, i i.e. Seção de cor branca. Na primeira seção "div", outra seção "div" é gerada, eu.e. Seção de cor cinza. Pode -se observar que o título 1 e os dados dentro da seção de divisão interna são colocados 500 pixels para longe do lado esquerdo da página.

Exemplo #03:

Vimos o uso de "pixels" como uma unidade para definir o valor para uma opção "preenchimento-esquerda" no código HTML. Além de "PX", também podemos tentar usar o caractere percentual "%" para definir a opção de preenchimento na esquerda no CSS do código HTML. Assim, adicionamos um título "H1" com o título "Nomes" e criamos uma lista não ordenada de um total de 5 elementos em nossa página da web usando a tag "UL" para "Lista não ordenada" e a tag "li" para inserir cada registro na lista.

A classe "título" é especificada para o título 1 e a classe "valores" é definida para a lista não ordenada. Dentro da tag "Style", definimos o valor do preenchimento esquerdo para H1 e a lista não ordenada para 20% usando os nomes de classe definidos nas tags. Agora, salve seu código para ver seus resultados.

Depois de executar esse código no código do Visual Studio, o navegador Chrome é lançado e a seguinte saída é exibida. Os "nomes" cabeçam junto com a lista não ordenada de 5 valores que ele contém são exibidos como esperado, que fica a 10 % do lado esquerdo. É assim que a opção de preenchimento pode ser usada para adicionar os dados da esquerda de qualquer página.

Dentro dos exemplos anteriores, tentamos a tag de estilo CSS dentro do mesmo arquivo, mas na cabeça do arquivo. Agora, usamos o estilo CSS em linha para o seguinte código HTML. Então, dentro da etiqueta da cabeça, usamos apenas a tag "título" para adicionar o título para este arquivo html, eu.e. Preenchimento esquerdo. Dentro do corpo deste arquivo, usamos o mesmo cabeçalho H1 e a lista não ordenada. Nós estilizamos o cabeçalho 1 e a lista não ordenada em linha, definindo os valores da opção de preenchimento para 12%. Também colocamos a borda para o cabeçalho 1 com a cor, violeta azul. Vamos salvar o código e executá -lo usando o botão "Executar" do código VS.

Dá a fronteira para o cabeçalho 1 - “Nomes”. Além disso, o cabeçalho e a lista não ordenada são exibidos a 12% da esquerda da página.

Conclusão

O parágrafo introdutório deste artigo elabora o uso de CSS no HTML e mostra a eles as maneiras de usar a opção de preenchimento na esquerda. Discutimos os códigos simples, porém elegantes do HTML, no código do Visual Studio para exibir o uso da opção de preenchimento-esquerda. Também tentamos esta opção com os caracteres "px" e "%" na seção de estilo separadamente para ver como a saída muda. Para isso, tentamos usar o estilo CSS em linha e esboço para os códigos HTML.