Margens (espaços) entre parágrafos em CSS - Os atributos margin-top e margin-bottom (Tutorial)

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de CSS de nossa apostila, vamos aprender para que serve e usar duas propriedades do CSS, a margin-top e a margin-bottom, que nos permitirão deixar as margens (espaçamento) entre os parágrafos do tamanho que quisermos.

• Baixar PDF: Apostila HTML + CSS Progressivo

Margens em CSS - margin

Quando ensinamos a indentar a primeira linha de um bloco de texto qualquer, em nosso tutorial sobre a propriedade text-indent, explicamos a importância desses espaçamentos, pois ajudam na organização do site e o tornam mais prazerosos para a leitura.

Porém, existem diferentes tipos de indentação e espaçamento, e um desses tipos são as margens.
Margens são espaçamentos que tem por função separar elementos com fins de organização e design.

As margens não tem cores, são sempre transparentes.

As margens, ou margin em inglês, são muito usadas em textos, imagens, para separar uma barra lateral do conteúdo, centralizar seu artigo, distanciar uma figura ou anúncio do texto etc.

Usaremos margens em diversos momentos de nosso curso de HTML e CSS, pois a propriedade margin é bem flexível e genérica.

Margem Entre Parágrafos - margin-top e margin-bottom

Para iniciar nossos estudos sobre margens em CSS, vamos aprender a definir o tamanho das margens entre os parágrafos, que você já deve ter notado ao usar a tag <p>.

Pode parecer pouca coisa, mas até pouco tempo atrás, quando somente o HTML reinava na criação de sites, esses espaçamentos e margens eram inalteráveis, e graças ao CSS hoje temos o poder e flexibilidade de decidir tudo em um site.

Margem Superior em CSS- margin-top: valor

Para definirmos a margem superior (espaço transparente) que fica acima de um parágrafo, por exemplo, usamos o atributo margin-top do CSS.
(top é topo, acima em inglês)

A sintaxe é bem simples:

margin-top: x n;

Onde 'x' é um valor numérico 'n' uma unidade de medida, como px, pt ou em.
Veja o seguinte exemplo de código HTML & CSS mostrando na prática o margin-top:

<p style="margin-top:30px">30px de margem acima</p>
<p style="margin-top:20px">20px de margem acima</p>
<p style="margin-top:10px">10px de margem acima</p>
<p style="margin-top:0 px">0 px de margem acima</p>

Agora o efeito

30px de margem acima

20px de margem acima

10px de margem acima

0  px de margem acima

Margem Inferior em CSS - margin-bottom: valor

No exemplo anterior, definimos bem a margem superior de cada parágrafo.

Já a margem inferior não foi definida, e o espaço que você viu no exemplo era resultado da margem do parágrafo abaixo.

Porém, há uma maneira de definir também a margem inferior de um elemento do HTML, como o parágrafo. Isso é possível através da propriedade "margin-bottom" do CSS, cuja sintaxe é:

margin-bottom: x n;

Onde 'x' é um valor numérico 'n' uma unidade de medida, como px, pt ou em.
(bottom, em inglês, significa fundo)

Vamos fazer um exemplo análogo ao anterior, agora mostrando como alterar a margem inferior de um parágrafo.

Nosso código HTML & CSS é:

<p style="margin-bottom:30px">30px de margem abaixo</p>
<p style="margin-bottom:20px">20px de margem abaixo</p>
<p style="margin-bottom:10px">10px de margem abaixo</p>
<p style="margin-bottom:0 px">0 px de margem abaixo</p>

Veja o efeito:

30px de margem abaixo

20px de margem abaixo

10px de margem abaixo

0 px de margem abaixo

Ler Tutorial

Espaçamento entre letras, palavras e linhas - letter-spacing, word-spacing e line-height Tutorial

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Em todos os outros tutoriais de CSS de nossa apostila, na seção de formatação de texto, aprendemos como mudar as características das fontes, como cor, tamanho, itálico, negrito, maiúsculo, minúsculo, dentre outras propriedades.

Neste tutorial vamos fazer algo um pouco diferente, não vamos alterar nada nas fontes, e sim do espaçamento entre elas: distância entre as letras, entre as palavras e entre as linhas de um texto.

• Apostila HTML Progressivo: Fazer download

Espaçamento entre letras em CSS - letter-spacing: px;

Neste tutorial de nossa apostila você vai notar como o CSS, aliado ao HTML, se torna uma ferramenta extremamente poderosa (pois podemos estilizar qualquer coisa em um site), flexível (é fácil de alterar os estilos CSS) e simples (formatamos textos com poucos códigos em uma folha de estilos).

Uma dessas funcionalidades do CSS é a capacidade de escolhermos o espaço, a distância entre uma letra e outra de qualquer texto na hora de se criar um site.

Isso é feito de uma maneira bem simples, através da propriedade letter-spacing:

letter-spacing: Xpx;

Onde x é um número correspondente a distância, do espaçamento entre as letras, dado em pixels.
O espaçamento padrão é 0 pixel.

Se colocarmos um valor positivo, como 4px por exemplo, aumentaremos o espaçamento para este valor, veja o código:

<div style="letter-spacing: 4px;">Espaçamento de 4 pixels</div>

O resultado é:

Espaçamento de 4 pixels

Porém, podemos também alterar o valor do espaçamento para menos, aproximando as letras uma das outras.
Para isso, colocamos um valor negativo de pixels.

Por exemplo, a seguinte frase tem espaçamento de -2 pixels:
Código: <div style="letter-spacing: -2px;">Espaçamento de -2 pixels</div>

Coloque esse código em um documento .html e veja o interessante resultado.

Espaçamento entre palavras em CSS - word-spacing: px;

Letras muito espaçadas uma das outras não são muito comuns, pois há pouca utilidade em distanciar os caracteres, afinal um texto onde as letras estão muito distantes é difícil de se ler.

Na prática, o mais comum é distanciar as palavras entre si.
Se quiser ver palavras mais espaçadas que o comum, veja algum texto de jornal ou tente justificar um texto no Word, por exemplo.

Para espaçar palavras, vamos usar a propriedade word-spacing, cuja sintaxe é:

word-spacing: Xpx;

E assim como na propriedade do CSS letter-spacing, x é um número correspondente a distância, do espaçamento entre as letras, dado em pixels.

O espaçamento padrão é 0 pixel, se colocar um valor acima de 0 px, você irá acrescentar uma distância no espaçamento padrão.
Se colocar um valor negativo de pixel, você irá reduzir o espaçamento entre as palavras.

Por exemplo, o seguinte estilo CSS aplicado vai espaçar as palavras em 5 pixels usando a propriedade word-spacing:

<div style="word-spacing: 5px;">Tutorial completo de CSS</div>

Onde o resultado é:

Tutorial completo de CSS

Agora vamos aproximar em  6 px a distância entre as palavras:
Código: <div style="word-spacing: -6px;">Tutorial completo de CSS</div>
Resultado:

Tutorial completo de CSS

Espaçamento entre Linhas em CSS - line-height: %

E por fim, vamos estudar um outro tipo de espaçamento que é muito importante para trabalharmos com liberdade na formatação dos textos de nossos websites, que é o espaçamento entre uma linha e outra.

Para definirmos o espaçamento entre uma linha e outra, usamos a propriedade line-height (altura da linha, em inglês).

Lembrando que você pode usar outras medidas de distância, como em, porcentagem e keywords como valores, como o valor "normal" para colocar o espaçamento padrão de seu browser/sistema, igual como fizemos em nosso tutorial sobre tamanho de fontes em CSS.

Veja diferentes sintaxes para definir o tamanho do espaçamento entre linhas em CSS:

<p style="line-height: 100%">line-height = <br>100%</p>
<p style="line-height: 16px">line-height = <br>16px</p>
<p style="line-height: 1.5">line-height = <br>1.5</p>
<p style="line-height: 2em">line-height = <br>2em</p>

Cujo efeito é o seguinte:

line-height =
100%

line-height =
10px

line-height =
1.5

line-height =
2em

Ler Tutorial

Tutorial de CSS - Formatação de Textos

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial inicial desta seção sobre Formatação de Textos em CSS, vamos explicar melhor o que é formatar um texto, como isso pode ser feito, a importância e propriedades que iremos estudar em nossa apostila de CSS.

• Apostila HTML Progressivo: Fazer download

CSS , Textos e A Nova Web

A internet está se tornando cada dia mais visual e auditiva, é bem comum vermos vídeos, assistir programas de televisão, futebol ao vivo, conversar com amigos via hangout, ver um show de sua banda favorita, filmes, seriados e outras coisas mais interativas.

Outro fator que ajudou bastante esse crescimento das mídias foi o fato da banda de internet no Brasil ter aumentado consideravelmente e os preços terem caído. Hoje em dia, até pessoas mais humildes têm acesso as redes sociais através de celulares.

Porém, embora esta mudança esteja ocorrendo, uma coisa nunca mudou e nunca vai mudar: os textos.
Antigamente, na década de 90, imagem era luxo, praticamente toda a rede era texto.
Os textos ainda continuam, mas surgiram novas mídias.

Sempre existirá textos em sites de notícias, pessoas que preferem ler e escrever nas redes sociais, instruções para preencher um formulário, campos de login e senha, fóruns de discussão, livros em pdf, tutoriais de programação, códigos de programação etc etc.

Podemos ficar aqui durante longos parágrafos falando sobre a importância dos textos e do seu uso, mas seria perder tempo, basta olhar os sites que acessa e ver a importância deles.
E se eles estão presentes em sites, é necessário saber estilizar e formatar textos através de CSS.

CSS em Textos

Qual a última vez que leu um texto sem formatação?
Um site inteiro com a mesma cor, fonte, tamanho, sem parágrafos, divisões, tags de cabeçalhos ?

Imagine um livro inteiro, sem divisão de capítulo, espaçamento de parágrafos, com títulos e rodapé com fonte de mesmo tamanho do texto comum.
É atrativo, é interessante, te motiva a ler?

Ora, um site toda igual, sem divisões lógicas e de design, é igualmente desestimulante.
Usar cor vermelha para notícias, verde para a seção de esportes e laranja para a seção de fofoca não é estética, é design, é marketing. Atrai, chama atenção, faz as pessoas passarem mais tempo em seu site.

Estilizar textos não é estética, ter senso e conhecimentos em fontes, cores e tamanho.é obrigatório, não é à toa que iremos disponibilizar diversos tutoriais de CSS sobre textos.

Lembre-se que fizemos a formatação de textos em HTML, porém, somente com HTML você precisa estilizar cada texto, cada cabeçalho e cada região de seu site.
O que é algo quase que humanamente impossível de se fazer em grandes portais nos dias de hoje.

Mas como vimos na seção sobre Tutorial Básico de CSS, podemos selecionar, identificar e estilizar tags, divisões, identificadores e praticamente qualquer região de qualquer página de um site.
Com um simples código podemos definir a fonte de todas as páginas, a cor de cada título, como se comporta os links quando passamos o mouse e outras infinidades de estilos e efeitos, tudo graças ao CSS.

Com apenas uma folha de estilos você diz como será a seção de moda de seu site, a cor que cada título vai ter, a fonte, o que acontece com o link ao ser clicado, como é o menu lateral com as notícias de esporte, pode colocar uma fonte em itálico em todas as citações de famosos ou políticos e o que mais sua criatividade (e estudo em CSS) permitir.

Tutorial de CSS sobre Formatação de Textos

Agora que já está bem ciente da importância da formatação de textos com CSS, vamos mostrar o que iremos aprender com estes tutoriais sobre o assunto em nossa apostila de CSS.

É importante que você estude, entenda bem e pratique todos os exemplos e exercícios que iremos apresentar, pois estilização de textos com CSS é algo de extrema importância para qualquer pessoa que queria aprender a criar sites.

Dentre outros assuntos, iremos estudar sobre:

• Como aplicar itálico, negrito e sublinhado em textos
• Cores em fontes (color), em hexadecimal, RGB e por nome da cor
• Definir tamanho da fonte (font-size), em pixels, porcentagem, palavras (small, larg etc) e ems
• Família de fonte (font-family), como Arial, Times New Roman, Sans-serif, Helvetica etc
• Fontes monoespaçadas
• Fontes decoradas (text-decoration)
• Fontes maiúsculas e minúsculas (text-transform, font-variant)
• Alinhamento (text-align), margem (margin-) e indentação (text-indent)
• Espaçamento entre letras e palavras (word-spacing e letter-spacing)
• Espaçamento entre linhas de um texto (line-height)
• Listas (list-style-type, list-style-position e list-style-image)

Ou seja, temos bastante estudo pela frente, muitos tutoriais de CSS para aprender :)

Ler Tutorial

Tamanho (width), espaçamento (cellspacing e cellpadding) e alinhamento (align) em tabelas de um site

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Dando continuidade a nossa seção sobre tabelas em nosso curso de HTML online e gratuito, vamos ensinar neste artigo como definir algumas características das tabelas, como seu tamanho, espaçamento de células e outros detalhes que nos ajudarão a manter nossas tabelas bem organizadas.

Ler Tutorial