CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Paddings

A propriedade padding permite que você especifique quanto espaço deve aparecer entre o conteúdo de um elemento e sua borda –

O valor desse atributo deve ser um comprimento, uma porcentagem ou a palavra herdar. Se o valor for herdado, ele terá o mesmo preenchimento de seu elemento pai. Se for usada uma porcentagem, a porcentagem pertence à caixa que a contém.

As seguintes propriedades CSS podem ser usadas para controlar listas. Você também pode definir valores diferentes para o preenchimento em cada lado da caixa usando as seguintes propriedades –

O padding-bottom especifica o padding inferior de um elemento.
O padding-top especifica o padding superior de um elemento.
O padding-left especifica o padding esquerdo de um elemento.
O padding-right especifica o preenchimento correto de um elemento.
O preenchimento atua como uma abreviação para as propriedades anteriores.

Agora, veremos como usar essas propriedades com exemplos.

A propriedade padding-bottom

A propriedade padding-bottom define o padding inferior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom padding
      </p>
      
      <p style = "padding-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
</html>

A propriedade padding-top

A propriedade padding-top define o preenchimento superior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top padding
      </p>
      
      <p style = "padding-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top padding in percent
      </p>
   </body>
</html>

A propriedade padding-left

A propriedade padding-left define o padding esquerdo (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left padding
      </p>
      
      <p style = "padding-left: 15%; border:1px solid black;">
         This is another paragraph with a specified left padding in percent
      </p>
   </body>
</html>

A propriedade padding-right

A propriedade padding-right define o preenchimento correto (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right padding
      </p>
      
      <p style = "padding-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right padding in percent
      </p>
   </body>
</html>

A propriedade de enchimento

A propriedade padding define o preenchimento esquerdo, direito, superior e inferior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px 
      </p> 
      
      <p style = "padding:10px 2%; border:1px solid black;"> 
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document. 
      </p> 
      
      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will 
         be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
</html>

Anterior CSS – Margins

Próximo CSS – Cursores

CSS - Fundamentos Básicos