Imagens em CSS - Borda, Margem, Espaçamento, < img >, Alinhamento e Formatação

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 sobre Imagens, vamos mostrar como formatar figuras em nossos sites, criando bordas, alinhando com o texto e como inserir legendas (caption).

Ler Tutorial

A propriedade margin do CSS - Tutorial sobre como usar margens

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 artigo de nossa apostila de CSS, iremos falar sobre o último, e provavelmente mais usado, elemento que compõe a Box Model (Modelo das Caixas), que são as margens, através do estudo da propriedade margin.

• Apostila HTML Progressivo: Fazer download

Margem em CSS - A Propriedade margin

Se estiver acompanhando nosso curso de HTML e CSS desde o início, certamente sabe que esta não é a primeira vez que abordamos o tema margens, pois tratamos de margem em parágrafos, onde vimos como espaçar os parágrafos entre si, tanto acima como abaixo.

Na verdade, as margens são muito usadas, principalmente por conta da propriedade margin, que é extremamente flexível, e nos permite definir as margens tanto em cima, abaixo e nas laterais, e de qualquer coisa.

O anúncio ao lado, por exemplo, tem um código CSS que define uma margem, um espaçamento do bloco de publicidade deste texto, para que não fiquem colados.

Em nosso Tutorial de Imagens em CSS, também iremos aprender a manipular imagens em um site, para definir seu local, margens, distâncias e espaçamentos, tudo através do nosso querido e todo poderoso CSS.

Se você já estudou a propriedade padding, vai entender logo o funcionamento da margin, pois podemos espaçar tanto acima (margin-top), abaixo (margin-bottom), na esquerda (margin-left) e pela direita (margin-right).





Embora essas propriedade do modelo de caixas (Box Model) do CSS se pareçam, elas são bem diferentes, com funções bem específicas.

A diferença de padding e margin

A princípio, parece um pouco confusa as funções da margin e da padding, mas vamos explicar bem isso agora, pois são coisas diferente, e você de ter tais conceitos bem definidos em sua mente.
Após a explicação iremos mostrar na prática a diferença da margin e da padding.

O segredo é: a margem atua fora da borda.
É isso que diferencia da propriedade padding do CSS, que faz um espaçamento interno no elemento, entre a borda e o elemento, mas internamente.

Ou seja, ela é o espaçamento externo, do lado de fora das bordas, sendo muito usada para distanciar um elemento de outro, como uma figura de um texto, duas figuras entre si, um jogo em JavaScript do restante do conteúdo do site etc.

Assim, você tem um elemento, ou uma caixa (um bloco) em seu site.
Coloque outro bloco. Ok, agora para separar um elemento de outro, você usa as margens, vai distanciá-los, dar um espaçamento externo entre os blocos.

Exemplo de código CSS com padding e margin

Vamos criar um simples exemplo, passo a passo.
Primeiramente crie seu documento HTML e sua folha de estilos.

Nosso site HTML ficou assim:

<!DOCTYPE html>
 
<html> 
 <head>
 <title>Tutorial de CSS - A Propriedade margin</title>
 <meta name="description" content="Como usar margens através da propriedade margin do CSS, em sites HTML.">
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

 <body>
 </body>

</html>

Note que o nome de nossa folha de estilos é estilo.css.
Agora vamos criar um simples parágrafo dentro da tag <body>:

<p>Curso de CSS Completo !</p>

Vamos aplicar uma borda nesse parágrafo, uma largura de 100px e colocar a cor branca nesse bloco.
O código para você aplicar na folha de estilos CSS é:

p{
 border: solid;
 width: 100px;
 background: white;
}

Veja o resultado.
Agora vamos adicionar um padding, de 10px em cada lado, apenas adicione o seguinte código CSS na sua folha, ao elemento p:

padding: 10px 10px 10px 10px;

Abra seu site e veja o resultado do padding, um espaçamento INTERNO, dentro da borda!
Vamos agora adicionar uma tag div, que vai englobar o parágrafo <p> da <body>, vamos nomear essa div com o atributo class e dar o nome de "bloco".

O código fica:

<div class="bloco">
 <p>Curso de CSS Completo !</p>
</div>

Volte na folha para estilizarmos essa div. que vai ter uma borda de cor azul, largura 125px e fundo amarelo. Ou seja, adicione o seguinte código em sua folha de estilos:

.bloco{
 border: solid blue;
 width: 125px;
 background: yellow;
}

margin-left, margin-right, margin-top, margin-bottom e margin

Agora vamos adicionar as margens!
Adicione cada um dos seguintes códigos, um por você e você vai ver qual a utilidade da propriedade margin:

margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;

Você pode substituir todas essas linhas por uma só, assim como fizemos com a padding:

margin: 10px 10px 10px 10px;

Maneiras de uso da propriedade margin

A propriedade de margem do CSS possui algumas funcionalidade bacanas, para adicionamos margem de várias maneiras simples, e uma delas nós mostramos no exemplo imediatamente acima, quando colocamos quatro valores de tamanho em sequência.

Quando fazemos isso:

margin: Apx Bpx Cpx Dpx;

O valor A define a margem superior, o valor B define a margem direita, o valor C define a margem inferior e o valor D a margem da esquerda.

Já se você colocar somente um valor: margin: Apx ;
Esse valor A será as margens em todas direçõas (top, right, down e left)

Se colocar dois valores: margin: Apx Bpx ;
O primeiro valor, o "A" será a margem inferior e superior (bottom e left) e o segundo valor "B" será o valor das margens laterais (right e left)

E por fim, é possível colocar três valores: margin: Apx Bpx Cpx;
Onde o A é para margem superior, o B para as margens laterais e o valor C é a margem inferior.

Lembrando que pixel (px) é só uma das medidas, você pode usar porcentagem, pt, em etc.

Veremos melhor como usara a propriedade margin e suas propeidades específicas, margin-top, margin-right, margin-bottom e margin-left, quando aprendermos a colocar mais blocos em nossos sites, como imagens, vídeos etc.

Ler Tutorial

Box Model (Modelo de Caixas) em CSS - Margin, Padder e Border

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 nosso Curso de CSS, vamos falar de um dos conceitos mais importantes sobre o CSS, o de Box Model (ou Modelo das Caixas).

Com a ideia apresentada neste artigo, entenderemos mais sobre layouts mais bonitos e profissionais, com colunas, espaçamentos, margens e outras ideias que fazem parte do Box Model em CSS.

• Fazer download da Apostila de HTML + CSS

Box Model em CSS - O Modelo de Caixas

Neste tutorial, não iremos estudar especificamente alguma propriedade do CSS ou nova tag, muito menos mostrar códigos e exemplos.

Vamos estudar algumas ideias e conceitos que nos farão entender melhor como funcionar o CSS, como ele age no HTML, e como ambos "vêem" cada elemento que inserimos no código HTML & CSS.

Box em inglês significa caixa, e é, basicamente, isso que cada elemento de um site é, é tudo uma espécie de caixa, no sentido de ser um retângulo, um bloco é a melhor definição.

Olhe nosso site, nossa Apostila HTML Progressivo.

Ele é todo composto por caixas, por retângulos ou blocos.

Veja, tem um bloco lá em cima, com o nome do site e uma frase logo abaixo.

Abaixo, colado, tem um bloco com os links de navegação, com as sessões e tutoriais.

Na esquerda tem um bloco com anúncio do AdSense, outros cursos, dicas de livros etc.

Na direita, há um bloco com os tutoriais mais visitados, e acima deste bloco há um pequeno bloco do G+, do Google Plus.

Dentro do nosso artigo, que é uma caixa, box ou bloco, há diversos blocos menores.

O título (uma tag <h1>) é um bloco retangular.

Cada parágrafo é uma caixa também, ela tem seu espaço para ocupar.

Uma figura com sua legenda também é um box, encaixado no restante do conteúdo.

O importante de se entender aqui é: as tags, elementos e tudo mais no HTML, quando são renderizados pelo navegador, o que vai ser visto são blocos, são boxes que vão se encaixando em cima, do lado, abaixo do outro, formando o layout de um site. Viu isso?

Elementos do Box Model - De que é feito o Modelo de Caixas

Ok, já sabemos e visualizamos o box model, e sabemos que o layout é a disposição e organização desses blocos, dessas caixas.

Agora vamos entrar em detalhe sobre cada um desses elementos, de cada caixa/box, e saber do que elas são compostas e como funcionam.

Cada caixa é composta por 4 elementos:

• conteúdo (content) do elemento, que pode ser um texto do parágrafo, imagem etc
• padding (acolchoamento ou enchimento, em inglês), fica imediatamente ao redor do conteúdo
• border (bordas) são linhas que delimitam o elemento, podendo aparecer em um ou mais direção (cima, baixo e nas laterais)
• margin (margens) é o espaçamento entre os elementos, ou seja, entre as caixas ou tags (boxes)

Veja a seguinte imagem para entender melhor o box model:

Fonte da Imagem: w3schools.com

Padding, Border e Margin: top, bottom, left e right

Ao longo dos próximos tutoriais de CSS, iremos estudar bastante sobre estas 3 propriedades padding, border e margin, pois eles não são importantes, seu uso é simplesmente  obrigatório e essencial na criação de qualquer de um layout profissional para qualquer site que você venha a fazer.

O flexível CSS no permite usar somente um, outro ou todos desses elementos.

E podemos formatar a região superior (top), inferior (bottom), esquerda (left) e direita (right) de cada um deles.

Veja na figura como é a ordem das caixas, que envolvem qualquer elemento de conteúdo:

Embora o CSS nos permita alterar somente uma ou outra caixa e seus valores, os que não forem claramente definidos nas folhas de estilo, serão renderizados de acordo com as propriedades padrão de cada navegador do usuário.

Ou seja, é uma prática importante e profissional definir e formatar o padding, border e margin, e os lados que compõe essas boxes em CSS (top, bottom, left e right).

Ler Tutorial

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