semana-1-css – Continue Desenvolvendo

Importante: Essas propriedades não incluem padding (preenchimento interno), border (borda) ou margin (margem) por padrão. Elas definem apenas o espaço para o conteúdo real.

Valores Possíveis para `height` e `width`:

auto: Valor padrão. O navegador calcula a altura/largura com base no conteúdo do elemento.
length (Comprimento): Define a altura/largura usando unidades fixas ou relativas (ex: px para pixels, cm para centímetros, em, rem).
% (Porcentagem): Define a altura/largura como uma porcentagem do tamanho do bloco que contém o elemento (elemento pai).
initial: Define a propriedade para seu valor padrão (auto).
inherit: O elemento herda o valor height ou width de seu elemento pai.

Exemplo Prático (height, width):

Código: p { height: 200px; width: 50%; }

Ensinamento: Define a altura de todos os parágrafos (<p>) para 200 pixels e a largura para 50% da largura do elemento pai que os contém.

2. Propriedade `max-width`

Ensinamento: Define a largura máxima que um elemento pode ter. Impede que o elemento se torne mais largo que o valor especificado, mesmo que a propriedade width seja maior ou o conteúdo precise de mais espaço.

Comportamento: Se o conteúdo for menor, max-width não tem efeito. Se o conteúdo for maior, ele pode ajustar a altura ou transbordar (dependendo de outras propriedades como overflow).

Prioridade: max-width sobrescreve a propriedade width.

Valores: length, %, none (sem limite máximo – padrão), initial, inherit.

Uso: Muito útil para design responsivo, garantindo que elementos não fiquem excessivamente largos em telas grandes e evitando barras de rolagem horizontais indesejadas em telas pequenas.

3. Propriedade `min-width`

Ensinamento: Define a largura mínima que um elemento pode ter. Impede que o elemento se torne mais estreito que o valor especificado, mesmo que a propriedade width seja menor ou o conteúdo precise de menos espaço.

Comportamento: Se o conteúdo for maior, min-width não tem efeito.

Prioridade: min-width sobrescreve a propriedade width.

Valores: length, %, initial (valor padrão é 0), inherit.

4. Propriedade `max-height`

Ensinamento: Define a altura máxima que um elemento pode ter. Impede que o elemento se torne mais alto que o valor especificado.

Comportamento: Se o conteúdo for maior que max-height, ele transbordará (overflow). A propriedade overflow controla como esse transbordamento é tratado. Se o conteúdo for menor, max-height não tem efeito.

Prioridade: max-height sobrescreve a propriedade height.

Valores: length, %, none (sem limite máximo – padrão), initial, inherit.

5. Propriedade `min-height`

Ensinamento: Define a altura mínima que um elemento pode ter. Impede que o elemento se torne mais baixo que o valor especificado.

Comportamento: Se o conteúdo for maior, min-height não tem efeito.

Prioridade: min-height sobrescreve a propriedade height.

Valores: length, %, initial (valor padrão é 0), inherit.

6. Propriedade `overflow` (Relacionada a `max-height` e `max-width`)

Ensinamento: Especifica o que acontece quando o conteúdo de um elemento é maior que sua caixa (definida por height/width ou limitada por max-height/max-width). Funciona melhor em elementos de bloco com altura definida.

Valores:

visible (Padrão): O conteúdo transborda e é renderizado fora da caixa do elemento.
hidden: O conteúdo que transborda é cortado (escondido). Não há barra de rolagem.
clip: Semelhante a hidden, mas proíbe qualquer tipo de rolagem (programática ou do usuário).
scroll: O conteúdo que transborda é cortado, mas barras de rolagem (horizontal e vertical) são adicionadas para permitir a visualização do restante, mesmo que não sejam necessárias.
auto: Barras de rolagem são adicionadas apenas se o conteúdo transbordar.
initial: Define como visible.
inherit: Herda o comportamento do elemento pai.

Materiais utilizados

Baixar arquivo sobre dimensões – largura e altura em CSS (HTML – 4kb)

Vídeo aula

4 pessoas já terminaram essa aula, agora é sua vez!

12 de outubro de 2025

Preenchimento em CSS

Por Juliano Lopes em Módulo CSS Tag semana-1-css

Introdução

Nesta aula, vamos nos concentrar no Preenchimento (Padding), um componente essencial do Box Model que controla o espaçamento interno dos elementos.

1. Introdução ao Padding

Padding é o espaço interno de um elemento HTML, localizado entre o conteúdo do elemento (texto, imagem, etc.) e sua borda.

Analogia: Imagine uma caixa (o elemento). O padding é como um enchimento ou acolchoamento dentro dessa caixa, empurrando o conteúdo para longe das paredes da caixa (a borda).

Diferença de Margin: Enquanto a margin cria espaço fora da borda do elemento (afastando-o de outros elementos), o padding cria espaço dentro da borda.

2. Propriedades Individuais de Padding

É possível controlar o padding de cada lado do elemento separadamente:

padding-top: Define o preenchimento na parte superior.
padding-right: Define o preenchimento no lado direito.
padding-bottom: Define o preenchimento na parte inferior.
padding-left: Define o preenchimento no lado esquerdo.

3. Valores Aceitos para Padding

As propriedades de padding aceitam os seguintes valores:

length: Um valor fixo com unidade (ex: px para pixels, pt para pontos, cm para centímetros, em, rem). Ex: padding-top: 10px;.
percent (%): Um valor percentual relativo à largura do elemento pai (container). Ex: padding-left: 5%;.
inherit: O elemento herda o valor de padding do seu elemento pai.

Importante: Padding não aceita valores negativos.

4. Propriedade Shorthand (`padding`)

Permite definir o padding para todos os lados em uma única declaração, economizando código. O número de valores fornecidos determina como eles são aplicados:

4 valores: padding: 5px 10px 15px 20px; (Aplica 5px no topo, 10px na direita, 15px na base, 20px na esquerda – sentido horário).
3 valores: padding: 5px 10px 15px; (Aplica 5px no topo, 10px na direita e esquerda, 15px na base).
2 valores: padding: 5px 10px; (Aplica 5px no topo e base, 10px na direita e esquerda).
1 valor: padding: 10px; (Aplica 10px em todos os quatro lados).

5. Interação entre Padding e Largura (`width`)

Comportamento Padrão:

Por padrão, quando você define uma largura (width) para um elemento e adiciona padding, o padding é somado à largura total visível do elemento.

Exemplo: Um elemento com width: 100px; e padding: 10px; terá uma largura visível total de 120px (100px do conteúdo + 10px de padding esquerdo + 10px de padding direito). Isso pode “quebrar” layouts.

Solução com `box-sizing: border-box;`:

Propriedade: box-sizing controla como a largura e altura totais de um elemento são calculadas.

Valor border-box: Ao definir box-sizing: border-box;, você instrui o navegador a incluir o padding (e a border) dentro da largura (width) e altura (height) especificadas para o elemento.

Resultado: Usando o exemplo anterior, com width: 100px; padding: 10px; box-sizing: border-box;, a largura total visível do elemento permanecerá 100px. O espaço para o conteúdo interno será reduzido para acomodar os 10px de padding em cada lado. Isso facilita a criação de layouts previsíveis.

Materiais utilizados

Baixar arquivo sobre preenchimento em CSS (HTML – 4kb)

Vídeo aula

4 pessoas já terminaram essa aula, agora é sua vez!

12 de outubro de 2025

Margens em CSS

Por Juliano Lopes em Módulo CSS Tag semana-1-css

Introdução

Nesta aula, vamos explorar as Margens (Margin) no CSS. As margens são essenciais para criar o espaçamento externo dos elementos, separando-os de seus vizinhos e de suas bordas.

Recomendado: É a parte mais externa do Modelo de Caixa CSS, ficando fora do preenchimento (padding) e da borda (border). É recomendado revisar vídeos anteriores sobre Box Model e Bordas.

1. O que são Margens? (Conceito e Analogia)

Margens em CSS definem o espaço ao redor de um elemento, fora de qualquer borda definida.

Analogia: Pense nas margens de um documento do Microsoft Word – o espaço em branco entre o conteúdo e a borda da página.

Relação com o Box Model: Margens são a parte mais externa do Box Model CSS, ficando fora do preenchimento (padding) e da borda (border).

2. Propriedades de Margem CSS (Lados Individuais)

É possível definir a margem para cada lado de um elemento individualmente usando propriedades específicas:

margin-top: Define a margem superior.
margin-right: Define a margem direita.
margin-bottom: Define a margem inferior.
margin-left: Define a margem esquerda.

Exemplo: Demonstração de como usar essas propriedades com valores em pixels (px) para criar espaçamento.

3. Tipos de Valores para Margens

As propriedades de margem podem aceitar diferentes tipos de valores:

auto: O navegador calcula a margem automaticamente.
length: Um valor de comprimento fixo (ex: px, pt, cm).
percent (%): Uma porcentagem relativa à largura do elemento contêiner.
inherit: O elemento herda o valor da margem do seu elemento pai.

4. Propriedade Abreviada (Shorthand) `margin`

Para simplificar, a propriedade margin pode ser usada para definir todas as quatro margens (ou menos) em uma única linha. A ordem dos valores importa:

4 valores: margin: top right bottom left; (sentido horário). Ex: margin: 5px 10px 15px 20px;
3 valores: margin: top right/left bottom; Ex: margin: 5px 10px 15px; (10px aplica-se à direita e esquerda).
2 valores: margin: top/bottom right/left; Ex: margin: 5px 10px; (5px aplica-se ao topo e base, 10px à direita e esquerda).
1 valor: margin: all; Ex: margin: 5px; (5px aplica-se a todos os quatro lados).

Observação: Os valores são separados por espaços.

5. Valores Especiais de Margem e Comportamentos

Valores Negativos

São permitidos e podem fazer com que os elementos se aproximem ou até se sobreponham aos seus vizinhos.

Valor `auto`

Usado principalmente para centralizar horizontalmente elementos de bloco que tenham uma width (largura) definida. O navegador distribui o espaço restante igualmente nas margens esquerda e direita. Ex: width: 125px; margin: auto;

Valor `inherit`

Faz com que um elemento use o mesmo valor de margem que foi definido em seu elemento pai. Ex: Se um <div> pai tem margin: 5px;, um <p> filho com margin: inherit; também terá margens de 5px.

6. Colapso de Margem (Margin Collapsing)

Um comportamento específico do CSS onde as margens verticais (top e bottom) de elementos de bloco adjacentes se fundem (colapsam).

Regra: A margem resultante entre eles não é a soma, mas sim o maior dos dois valores de margem que colidiram.

Exemplo: Se um <h1> tem margin-bottom: 50px; e o <p> seguinte tem margin-top: 20px;, o espaço entre eles será de 50px (o maior valor), não 70px.

Importante: Isso só acontece com margens top e bottom, não com left e right.

Elemento de Bloco: Elementos que, por padrão, ocupam toda a largura disponível e começam em uma nova linha (ex: <div>, <p>, <h1>).