A distância entre o texto e as bordas em CSS

Escrito por c.a. rubino | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
A distância entre o texto e as bordas em CSS
Use propriedades CSS para definir o estilo visual de uma página (Comstock/Comstock/Getty Images)

Cada elemento em CSS possui os seus próprios valores e propriedades. Usando CSS, um designer web pode aplicar uma ampla variedade de efeitos visuais e layouts a elementos, construindo diferentes aparências e formatos. Uma ferramenta básica disponível para o designer é o uso de bordas, separando visualmente elementos para uma fácil navegação ou compreensão. Ser capaz de controlar a distância e o posicionamento de uma borda ao redor de um elemento requer o entendimento do "padding" (Espaçamento) e o uso dele em CSS.

Outras pessoas estão lendo

Modelo de caixas

Os elementos em CSS seguem o modelo de caixas. Basicamente, cada componente de um elemento está envolto pelo componente por cima dele, criando caixas cada vez menores. Isso significa que as margens rodeiam a borda, que por sua vez rodeia o "padding", e esta por sua vez rodeia o conteúdo do elemento. Seguindo esse modelo, a distância entre o conteúdo (por exemplo, um texto) e a borda do elemento é o "padding". Ao especificar um valor diferente para essa propriedade, a distância entre o texto e a borda aumentará.

Adicionando

O "padding" de um elemento pode ser definido da mesma forma que as margens e, até um certo ponto, as bordas. Adicione "padding:" e, em seguida, o tamanho e um ponto e vírgula para completar a linha. Por exemplo, um elemento com um "padding" de 15 pixels em todos os lados possui a propriedade "padding: 15px;". Como a margem e as bordas, os quatro lados do "padding" podem ser declarados individualmente e receber valores diferentes. Um elemento sem "padding" superior e inferior, mas com um valor aos lados, terá uma linha como a seguinte: "padding: 0px 15px 0px 15px;" ou "padding: 0px 15px;", usando a notação abreviada. No primeiro exemplo, a declaração começa pelo "padding" superior e avança no sentido horário; no segundo, as partes superior e inferior se agrupam no primeiro valor, e as laterais se agrupam no segundo. Todas as formas são corretas.

Uso

O "padding" é usado para colocar uma distância entre o conteúdo de um elemento, como por exemplo texto ou uma imagem, e a borda atual. Com isso, é possível definir o tamanho de um elemento rodeado por uma borda, para que ela não esteja limitada ao tamanho do conteúdo. Um lado do "padding" de um elemento pode ser ampliado e combinado com uma borda, criando um lindo divisor entre elementos de uma lista. Use o "padding" como outra ferramenta para organizar e colocar os elementos em uma página web.

Diferenciação

Se uma borda não estiver sendo exibida ao redor de um elemento, pode ser difícil diferenciar o "padding" das margens. A diferença principal entre as duas coisas é que a borda marca o limite do elemento. Como as margens estão no outro lado da borda, considera-se que estão fora do elemento. O "padding", por outra parte, é ainda considerado dentro do elemento, aumentando efetivamente o tamanho geral do mesmo. Isso é importante especialmente ao aplicar uma cor de fundo ou imagem ao elemento. Se uma margem for usada, o fundo parará na borda, mas o "padding" o estenderá.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível