📏 Width (Largura)
/* Diferentes unidades de largura */
.elemento1 { width: 300px; } /* Pixels - valor fixo */
.elemento2 { width: 50%; } /* Porcentagem do pai */
.elemento3 { width: 20em; } /* Relativo à fonte */
.elemento4 { width: 100vw; } /* Viewport width */
.elemento5 { width: auto; } /* Automático */
Width: 300px (fixo)
Width: 75% (relativo ao pai)
Width: auto (automático)
🎯 Dica: Use max-width para evitar que elementos fiquem muito largos em telas grandes!
📏 Height (Altura)
/* Diferentes alturas */
.fixo { height: 100px; } /* Altura fixa */
.auto { height: auto; } /* Automática */
.minima { min-height: 120px; } /* Altura mínima */
.maxima { max-height: 200px; } /* Altura máxima */
.viewport { height: 50vh; } /* 50% da tela */
Height: 100px
Height: auto
(se ajusta ao conteúdo)
Min-height: 120px
(altura mínima garantida)
🔤 Formatação de Texto
/* Propriedades de texto principais */
font-family: 'Arial', sans-serif; /* Tipo de fonte */
font-size: 16px; /* Tamanho */
font-weight: bold; /* Peso (normal, bold, 100-900) */
font-style: italic; /* Estilo */
text-align: center; /* Alinhamento */
line-height: 1.6; /* Altura da linha */
letter-spacing: 2px; /* Espaçamento entre letras */
text-decoration: underline; /* Decoração */
Fonte Serif (Times New Roman) - Boa para textos longos
Fonte Sans-serif (Arial) - Boa para títulos e web
Fonte Monospace (Courier) - Boa para código
Texto com decoração, espaçamento e altura de linha aumentada
📦 Box Model
/* Box Model - 4 componentes */
.elemento {
width: 200px; /* 1. CONTENT - conteúdo */
padding: 20px; /* 2. PADDING - espaçamento interno */
border: 5px solid red; /* 3. BORDER - borda */
margin: 15px; /* 4. MARGIN - espaçamento externo */
/* IMPORTANTE: */
box-sizing: content-box; /* Padrão - width NÃO inclui padding/border */
box-sizing: border-box; /* width INCLUI padding e border */
}
Demonstração Visual do Box Model
CONTENT
width: 250px
🟨 Margin: 20px (espaço externo)
🟩 Border: 3px (borda verde)
🟧 Padding: 20px (espaço interno)
🟦 Content: 250px × 80px (conteúdo)
Content-box (Padrão)
200px
Largura Total:
200px + 20px padding + 5px border = 250px
Border-box
200px
Largura Total:
200px (inclui tudo)
💡 Dica Importante: Use box-sizing: border-box; globalmente para facilitar cálculos de layout!
*, *::before, *::after { box-sizing: border-box; }