tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Preenchimento


Propriedades CSS Padding

As CSS padding propriedades são usadas para gerar o espaço em torno do conteúdo.

As propriedades de preenchimento definir o tamanho do espaço em branco entre o conteúdo do elemento e a borda do elemento.

Este elemento tem um preenchimento de 50px.


Padding CSS

As propriedades CSS preenchimento definir o espaço em branco entre o conteúdo do elemento e da fronteira elemento.

O preenchimento limpa uma área em torno do conteúdo (dentro da fronteira) de um elemento.

NotaNota: O enchimento é afectada pela cor do elemento de fundo!

Com CSS, você tem total controle sobre o preenchimento. Há propriedades CSS para definir o preenchimento para cada lado de um elemento (em cima, à direita, inferior e esquerda).


Estofamento - Sides individuais

CSS tem propriedades para especificar o preenchimento de cada um dos lados de um elemento:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Todas as propriedades de preenchimento pode ter os seguintes valores:

  • comprimento - especifica um estofamento em px, pt, cm , etc.
  • % - Especifica um estofamento em% da largura do elemento contendo
  • herdar - especifica que o preenchimento deve ser herdado do elemento pai

O exemplo a seguir define o preenchimento diferente para todos os quatro lados de um <p> elemento:

Exemplo

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Tente você mesmo "

Estofamento - Propriedade Taquigrafia

Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma propriedade.

O padding propriedade é um atalho para as seguintes propriedades de preenchimento individuais:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Exemplo

p {
    padding: 50px 30px 50px 80px;
}
Tente você mesmo "

Então, aqui está como funciona:

Se o padding propriedade tem quatro valores:

  • padding: 25px 50px 75px 100px;
    • estofamento superior é 25px
    • preenchimento correto é 50px
    • preenchimento de fundo é 75px
    • padding-left é 100px

Se o padding propriedade tem três valores:

  • padding: 25px 50px 75px;
    • estofamento superior é 25px
    • paddings direita e esquerda são 50px
    • preenchimento de fundo é 75px

Se o padding propriedade tem dois valores:

  • padding: 25px 50px;
    • paddings superior e inferior são 25px
    • paddings direita e esquerda são 50px

Se o padding propriedade tem um valor:

  • padding: 25px;
    • todos os quatro preenchimentos são 25px

Exemplos

mais Exemplos

Todas as propriedades de preenchimento em uma declaração
Este exemplo demonstra uma propriedade estenográfica para especificar todas as propriedades de preenchimento em uma declaração, pode ter de um a quatro valores.

Definir o padding-left
Este exemplo demonstra como definir o padding-left de um <p> elemento.

Defina o preenchimento direito
Este exemplo demonstra como definir o preenchimento direito de um <p> elemento.

Defina o preenchimento superior
Este exemplo demonstra como para definir o estofamento superior de um <p> elemento.

Defina o preenchimento de fundo
Este exemplo demonstra como para definir o estofamento fundo de um <p> elemento.


Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 »


Todas as propriedades CSS Padding

Propriedade Descrição
padding Um atalho para definir todas as propriedades de preenchimento em uma declaração
padding-bottom Define o preenchimento de fundo de um elemento
padding-left Define o preenchimento à esquerda de um elemento
padding-right Define o preenchimento direito de um elemento
padding-top Define o preenchimento superior de um elemento