A Propriedade display em CSS: Elementos inline e block - 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 nossos tutoriais sobre o modelo das caixas (Box Model) em CSS pudemos ver como os elementos do layout de um site são caixas, ou blocos, que vão se encaixando, se acomodando e formando um site.

Mas, como tudo no CSS, é possível também alterar como essas caixas são exibidas em um site, e isso será feito através da propriedade display em CSS.

• Fazer download da Apostila de HTML + CSS

Propriedade CSS display - Como os elementos são exibidos

Que os elementos de um site são blocos, ou retângulos e vão se encaixando entre si através de configurações de HTML e CSS para formar um layout, estamos careca de saber.

Inclusive, ao estudar as propriedades margin, border e padding vimos que é possível fazer diversas mudanças nessas "caixas", como espaçá-las, colocar bordas com diversos tipos de efeitos e até aumentar seu espaçamento interno.

Mesmo com essas possibilidades, essas caixas continuam a ser caixas, blocos retângulos.
O que a propriedade CSS display faz é mudar como essas caixas vão se comportar.

Aliás, display, em inglês, significa exibir, e através da propriedade CSS display iremos selecionar como os elementos de um site serão exibidos e como vão se relacionar entre site.

No decorrer de nossos tutoriais de CSS, vimos basicamente dois tipos de propriedade CSS display, que foram os display block e display inline, que vamos explicar melhor agora.

O que são elementos em bloco (block) e em linha (inline) no CSS

Um importante tipo de caixa é o do tipo bloco (block box), exemplos desse tipo de display são os parágrafos <p>.
Lembre-se que quando usamos esta tag, ela cria um bloco, uma divisão, que separa o parágrafo do que estiver acima e do que estiver abaixo.

Como exemplo, vamos escrever "Tutorial de CSS", mas vamos colocar o "de" entre as tags <p> e </p>, o código HTML é:

Tutorial <p>de</p> CSS

Se testarem o resultado, verão que a palavra "de" foi isolada, tem um bloco só para ela, uma divisão abaixo e acima, além de tomar toda a largura (width) disponível.

O mesmo ocorre com a tag <div>, testem o seguinte código:

Tutorial <div>de</div> CSS

O resultado é o mesmo:
Tutorial

de

CSS

Um outro tipo comum de tipos de caixa, são as do tipo inline, ou em linha.
Se nos elementos do tipo block havia uma divisão acima, abaixo e pegava todo o espaço lateral, o mesmo não ocorre nos elementos inline, como o nome sugere, esses elementos ficam na mesma linha.

O exemplo mais clássico é de negrito <b>.
Veja, vamos colocar somente a palavra "de" entre as tags <b>:
Tutorial de CSS

O mesmo ocorre com a tag <i>, que dá o efeito de itálico:
Tutorial de CSS

As Propriedades CSS display: inline e display: block

Ok, vimos que algumas tags são do tipo block por padrão, como as de parágrafo e as divs.
Já outras, como as de negrito <b>, itálico <i> e a <span> são inline, pois são renderizadas na mesma linha.

Isso no HTML, no padrão.
Como sempre, o CSS nos dá a incrível flexibilidade e poder de mudar o que quisermos, e isso vai ficar ainda mais claro quando aprendermos sobre a propriedade display do CSS.

Basicamente, usando a propriedade display com o valor inline, estamos dizendo para o CSS exibir aquele elemento como se fosse inline, e caso usemos a propriedade display com o valor block, aquele elemento vai ser exibido como se fosse naturalmente block, ou seja, com uma divisão abaixo, acima e ocupando toda a largura (width).

Como usar a propriedade CSS display: inline

Por exemplo, as tags de cabeçalho H1, H2, H3 etc, são todas do tipo display: block, por padrão.
Vamos mudar isso?

No seu documento HTML teste o código:

<h1>Tutorial </h1>
<h2>de </h2>
<h3>CSS</h3>

Agora em sua folha de estilos experimente fazer:

h1, h2, h3{
 display: inline;
}

O resultado vai ser que estas tags ficarão uma ao lado da outra, onde antes, sem o uso de display inline, elas ficariam uma abaixo da outra.

Como usar a propriedade CSS display: block

E assim como fizemos na propriedade anterior, para transformar um elemento display block em display inline, o contrário é possível e análogo, bem simples.

Por exemplo, alguns defacers, hackers que costumam invadir sites para alterar sua aparência apenas, costumam 'bagunçar' os sites, deixando-os feios, e uma maneira bem simples de fazer isso é através da propriedade display.

Por exemplo, as tags de negrito <b> e itálico <i> são elementos display inline por padrão, afinal seria extremamente incômodo ter uma divisão, uma quebra de linha antes e depois de cada palavra em negrito, seria uma bagunça.

Por exemplo, o código HTML dessa frase: Tutorial de CSS
É:

<b>Tutorial</b> <i>de</i> <u>CSS</u>

Adicionando o simples código CSS em sua folha de estilos:

b, i, u {
 display: block;
}

Você já faria com que todas as palavras em negrito, itálico e sublinhadas se tornassem do tipo display block. Simples e poderoso, esse CSS, não?

Mais propriedades CSS display

Para nossos propósitos atuais, de nossos tutoriais básicos de CSS, entender o que é, como funciona e como usar o display: inline e o display: block é, por hora, suficiente.
Porém, a propriedade display vai muito mais além e nos fornecesse diversas opções no quesito de 'exibir' (display) algum elemento de nosso site.

No decorrer de nosso Curso de HTML e CSS iremos estudar as outras possibilidades existentes da propriedade display em detalhes, mas por hora iremos dar um pequeno resumo sobre o que é possível fazer com essa fantástica propriedade do CSS display.

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

Espaços no Site - Tutorial de CSS Sobre a Propriedade padding

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 aprender um importante elemento do Box Model (ou Modelo de Caixas), o padding.

• Estude offline: Apostila HTML + CSS

A propriedade padding do CSS - Espaçamento ao redor do conteúdo

Como estudamos o Box Model, ou Modelo de Caixa, vimos que o primeiro bloco, ou caixa, ao redor de um conteúdo (que pode ser um texto, uma figura ou outro elemento qualquer) é o padding, que é uma espécie de espaçamento, enchimento ou acolchoamento.

Ou seja, ao definirmos os valores para a propriedade padding, estamos definindo o valor do espaçamento entre o conteúdo e a borda do elemento (da caixa em questão).

Lembrando que podemos formatar o espaçamento em quatro direções: top, bottom, left e right (acima, abaixo, na esquerda e na direita).

Assim como outros elementos que definem algum tamanho em CSS, vamos formatar essas distâncias da propriedade padding através do valor em pixels (px), pt ou em.

A propriedade padding tem cinco variações diferentes, de acordo com uma direção específica do espaçamento, ou para definir todas de uma vez.
Veremos agora como usar cada uma dessas variações.

padding-top : Espaçamento Acima do Conteúdo em CSS

A primeira variação da propriedade padding que vamos estudar é a padding-top, que vai definir o espaçamento acima do conteúdo.

A sintaxe é simples:

padding-top: n px;

Onde 'n' é um valor numérico, e px é apenas uma das maneiras de se definir a unidade (px é de pixel).

Para facilitar a visualização e teste do padding, vamos usar apenas um parágrafo (<p>) como sendo o conteúdo, e vamos pintar o fundo dele de cinza, para você visualizar bem esse padding.

Crime um documento .html e use o seguinte código em sua folha de estilos:

p{
 padding-top: 10px;
 background: grey;
 width: 400px;
}

Note que escolhemos 10px . Então, teremos um espaçamento de 10 pixels acima do texto presente em todos os parágrafos.
Vejamos como esse código se mostra quando abrirmos o site HTML:

Este parágrafo tem 10px de padding, acima

Agora 20 px, veja como aumenta o espaço:

Este parágrafo tem 20px de padding, acima

padding-bottom : Espaçamento Abaixo do Conteúdo em CSS

Agora, nesta variação da propriedade padding que vamos estudar a padding-bottom, que vai definir o espaçamento abaixo do conteúdo.

A sintaxe do padding-bottom é:

padding-bottom: n px;

Onde 'n' é um valor numérico, e px é apenas uma das maneiras de se definir a unidade (px é de pixel).
O seguinte código HTML & CSS mostra dois exemplos de uso do padding-bottom, um de 10 pixel e outro de 20 pixel:

<p style="padding-bottom: 10px; background: grey;">Este parágrafo tem 10px de padding, abaixo (bottom)</p>
<p style="padding-bottom: 10px; background: grey;">Este parágrafo tem 20px de padding, abaixo (bottom)</p>

Veja o efeito e como aumenta o espaçamento abaixo do conteúdo:

Este parágrafo tem 10px de padding, abaixo (bottom)

Este parágrafo tem 20px de padding, abaixo (bottom)

padding-left : Espaçamento na Esquerda do Conteúdo em CSS

Agora vamos aprender a usar a propriedade padding para criar um espaçamento lateral, vamos usar a padding-left, para definir um espaçamento na lateral do conteúdo, na esquerda (left).

Vamos usar o atributo width para definir uma região de 300 pixels de largura.
O seguinte código CSS & HTML vai criar dois parágrafos estilizados, com a propriedade padding-left valendo 10 pixels no primeiro parágrafo, e 20 px no segundo:

<p style="padding-left: 10px; background: grey; width= 300px;">Este parágrafo tem 10px de padding, na esquerda (left)</p>
<p style="padding-left: 20px; background: grey; width= 300px;">Este parágrafo tem 20px de padding, na esquerda (left)</p>

Veja o efeito e o espaçamento na lateral esquerda:

Este parágrafo tem 10px de padding, na esquerda (left)

Este parágrafo tem 20px de padding, na esquerda (left)

padding-right : Espaçamento na Direita do Conteúdo em CSS

Agora, analogamente ao que fizemos anteriormente, o padding-right serve para criar um espaçamento, mas agora na direita do conteúdo.

Veja o código HTML e de CSS, com 10px e 20px na lateral direita:

<p style="padding-right: 10px; background: grey; width= 200px;">Este parágrafo tem 10px de padding, na direita (right)</p>
<p style="padding-right: 20px; background: grey; width= 200px;">Este parágrafo tem 20px de padding, na direita (right)</p>

Rode o código dessa padding-right e veja o resultado no seu documento .html

padding : A propriedade de Espaçamento no CSS

Como dissemos anteriormente, é recomendável que você defina o espaçamento usando a propriedade padding para todas as direções: top, bottom, left e right.

Para evitar ter que repetir padding-top, padding-bottom, padding-right e padding-left, você pode definir todos esses valores em uma única propriedade, a padding.
A sintaxe é:

padding: tpx rpx bpx lpx;

Onde 't' é o valor para o top, 'r' de right, 'b' de bottom e 'l' de left.
Ou seja, você fornece 4 valores em sequência e sem vírgula, onde a ordem é sempre: top, right, bottom e left.

Por exemplo, se você deseja que seus parágrafos tenha 20 pixels de espaçamento acima, 10 pixels na direita, 25 pixels abaixo do conteúdo e 15px na esquerda, usando a propriedade padding, coloque em sua folha de estilos o seguinte código CSS:

p{
 padding: 20px 10px 25px 15px;
 width: 300px;
 background: gray;
}

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