Lidando com arquivos

Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo,

conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos
em uma certa estrutura no computador local, certificar-se de que eles possam se
comunicar e obter todo o conteúdo antes de enviá-los para o servidor. Lidando com
Arquivos discute algumas questões às quais você deve estar ciente para que você
possa configurar uma estrutura de arquivos para o seu site.

Onde seu site deve residir no seu computador?

Quando você está trabalhando em um site localmente no seu próprio computador,
você deve manter todos os arquivos relacionados em uma mesma pasta que reflete
a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar
em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil
acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.

1. Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta
chamada projetos-web (ou algo do tipo). Essa é a pasta onde todos seus projetos de
site estarão.
2. Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela
de site-teste (ou algo mais criativo).

Deixando de lado as maiúsculas e espaços

Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie
pastas e arquivos completamente em letras minúsculas e sem espaços. Isso
acontece porque:

1. Muitos computadores, particularmente servidores web, são case-sensitive. Então,

por exemplo, se você colocar uma imagem no seu site em site-teste/MyImage.jpg, e
então em um outro arquivo você tentar chamar site-teste/myimage.jpg, não vai
funcionar.
2. Navegadores, servidores web e linguagens de programação não lidam bem com
espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns
sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão
substituir os espaços no nome do arquivo por "%20" (o código para espaço
em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de
sublinhado: meu-arquivo.html vs. meu_arquivo.html.

A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O
mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas
não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o
hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem
espaços e com palavras separadas por traços, pelo menos até você saber o que
está fazendo. Dessa forma, você encontrará menos problemas no futuro.
Qual estrutura seu site deve ter?
A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns
que temos em qualquer projeto de site que criamos são um arquivo de índice HTML
e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-
los agora:

1. index.html: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja,
os textos e as imagens que as pessoas veem quando acessam seu site pela
primeira vez. Usando seu editor de texto, crie um novo arquivo
chamado index.html e salve dentro da sua pasta site-teste.
2. pasta imagens: Essa pasta vai conter todas as imagens que você vai usar no seu
site. Crie uma pasta chamada imagens, dentro da sua pasta site-teste.
3. pasta estilos: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu
conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma
pasta chamada estilos, dentro da pasta site-teste.
4. pasta scripts: Essa pasta vai conter todos os códigos JavaScript usados para
adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados
quando clicados). Crie uma pasta chamada scripts, dentro da sua pasta site-teste.

Nota: Em computadores com Windows, você deve ter problemas para ver os nomes
dos arquivos, porque o Windows tem uma opção chamada Ocultar as extensões
dos tipos de arquivo conhecidos ativada por padrão. Geralmente você pode
desativar essa opção indo no Windows Explorer, selecionando a opção Opções de
pasta..., desmarque a caixa de seleção Ocultar as extensões dos tipos de
arquivo conhecidos, e clique em OK. Para mais informação sobre sua versão de
Windows, procure na web.

Caminhos de arquivo
Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de
arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro
está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso
arquivo index.html, e fazer mostrar a imagem que você escolheu no artigo "Como
será o seu site?"

1. Copie a imagem que você escolheu antes para sua pasta imagens.
2. Abra seu arquivo index.html e insira o seguinte código exatamente como está
escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes
essa estrutura posteriormente.
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <title>Minha página de teste</title>
8. </head>
9. <body>
10. <img src="" alt="Minha imagem de teste">
11. </body>
</html>

Copy to Clipboard
 12. A linha <img src="" alt="Minha imagem de teste"> é o código HTML que vai inserir
uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A
imagem está dentro da pasta imagens, no mesmo diretório do index.html. Para
trilhar o caminho de index.html para nossa imagem, o caminho é imagens/nome-da-
sua-imagem. Por exemplo, nossa imagem é chamada firefox-icon.png, então, nosso
caminho é imagens/firefox-icon.png.
13. Insira o caminho dentro do seu código HTML, dentro das aspas do código src="".
14. Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-
clique no arquivo). Você deve ver sua nova página mostrando sua imagem!

Algumas regras gerais para caminhos de arquivo:

 Para linkar para um arquivo no mesmo diretório do arquivo HTML, apenas use o
nome do arquivo, ex.: my-image.jpg.
 Para linkar um arquivo em um sub-diretório, escreva o nome do diretório na frente,
mais uma barra, ex.: subdirectory/my-image.jpg.
 Para linkar um arquivo acima do arquivo HTML, use dois pontos. Então, por
exemplo, se index.html estiver dentro de uma subpasta de site-teste e my-
image.png estiver dentro de site-teste, você pode fazer referência a my-
image.png em index.html usando ../my-image.png.
 Você pode combinar isso como preferir, por exemplo ../subdiretorio/outro-
subdiretorio/my-image.png.

Por agora, isso é tudo o que precisamos saber.

Nota: O sistema de arquivos do Windows tende a usar barras invertidas, não barras
normais , ex.: C:\windows. Isso não importa — mesmo se você estiver desenvolvendo seu
site no Windows, você ainda deve usar barras normais no seu código.

O que mais deve ser feito?

Por agora, é isso. Sua pasta deve parecer algo do tipo:

CSS básico
CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua
página Web. CSS básico apresenta tudo que você precisa para começar.
Responderemos a perguntas do tipo: Como mudo meu texto para preto ou
vermelho? Como faço para que meu conteúdo apareça em determinados lugares na
tela? Como decoro minha página com imagens e cores de fundo?
Então, o que realmente é CSS?
Assim como o HTML, o CSS não é realmente uma linguagem de programação.
Também não é uma linguagem de marcação — é uma linguagem de folhas de
estilos. Isso significa que o CSS permite aplicar estilos seletivamente a elementos
em documentos HTML. Por exemplo, para selecionar todos os elementos parágrafo
de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este
CSS:
p{
color: red;
}
Copy to Clipboard

Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor
de texto, e salve o arquivo como estilo.css na sua pasta estilos.
Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o
estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento
HTML (se você não estiver acompanhando o nosso projeto, leia Lidando com
arquivos e HTML básico para descobrir o que você precisa fazer primeiro).
1. Abra seu arquivo index.html e cole o seguinte código em algum lugar no cabeçalho,
ou seja, entre as tags <head> e </head>:
<link href="estilos/estilo.css" rel="stylesheet">
Copy to Clipboard
2. Salve o arquivo index.html e abra ele no seu navegador. Você deve ver uma página
como essa:

Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro
CSS de sucesso.
Anatomia de um conjunto de regras CSS
Vamos dar uma olhada no CSS acima com mais detalhes:

Toda essa estrutura é chamada de conjunto de regras (mas geralmente usamos o

termo "regra", por ser mais curto). Note os nomes das partes individuais:
Seletor (Selector)
O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s)
elemento(s) a serem estilizados (nesse caso, elementos <p>). Para dar estilo a um
outro elemento, é só mudar o seletor.
Declaração (Declaration)
Uma regra simples como color: red; especificando quais das propriedades do
elemento você quer estilizar.
Propriedades (Property)
Forma pela qual você estiliza um elemento HTML. (Nesse caso, color é uma
propriedade dos elementos <p>.) Em CSS, você escolhe quais propriedades você
deseja afetar com sua regra.
Valor da propriedade (Property value)
À direita da propriedade, depois dos dois pontos, nós temos o valor de
propriedade, que escolhe uma dentre muitas aparências possíveis para uma
determinada propriedade (há muitos valores color(cor) além do red(vermelho)).
Note outras partes importantes da sintaxe:
 Cada linha de comando deve ser envolvida em chaves ({}).
 Dentro de cada declaração, você deve usar dois pontos (:) para separar a
propriedade de seus valores.
  Dentro de cada conjunto de regras, você deve usar um ponto e vírgula (;) para
separar cada declaração da próxima.
Então para modificar múltiplos valores de propriedades de uma vez, você deve
escrevê-los separados por ponto e vírgula, desse modo:
p{
color: red;
width: 500px;
border: 1px solid black;
}
Copy to Clipboard

Selecionando múltiplos elementos

Você também pode selecionar vários tipos de elementos e aplicar um único conjunto
de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por
exemplo:
p, li, h1 {
color: red;
}
Copy to Clipboard

Diferentes tipos de seletores

Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas
os seletores de elementos, que selecionam todos os elementos de um
determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais
específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:
Nome do seletor O que ele seleciona Exemplo

Seletor de
elemento (às
Todos os elementos HTML de determinado p
vezes, chamado
tipo. Seleciona <p>
tag ou seletor de
tipo)

O elemento na página com o ID específicado.

Em uma determinada página HTML, é uma
#my-id
boa prática usar um elemento por ID (e claro,
Seletor de ID Seleciona <p id="my-id"> ou <a
um ID por elemento) mesmo que seja
id="my-id">
permitido usar o mesmo ID para vários
elementos.

O(s) elemento(s) na página com a classe .my-class

Seletor de classe específicada (várias instâncias de classe Seleciona <p class="my-
podem aparecer em uma página). class"> e <a class="my-class">

Seletor de atributo O(s) elemento(s) na página com o atributo img[src]

Nome do seletor O que ele seleciona Exemplo

Seleciona <img
especificado. src="myimage.png"> mas
não <img>

a:hover
O(s) elemento(s) específicado(s), mas
Seletor de Seleciona <a>, mas somente
somente quando estiver no estado
pseudo-classe quando o mouse está em cima
especificado. Ex.: com o mouse sobre ele.
do link.

Fontes e texto
Agora que exploramos algumas noções básicas de CSS, vamos começar a
adicionar mais regras e informações no nosso arquivo estilo.css para deixar nosso
exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um
pouco melhores.
1. Primeiro de tudo, volte e encontre a fonte do Google Fonts que você armazenou em
algum lugar seguro. Adicione o elemento <link> em algum lugar dentro do cabeçalho
no index.html (novamente, em qualquer lugar entre as tags <head> e </ head>).
Será algo parecido com isto:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Copy to Clipboard
Esse código vincula sua página a uma folha de estilo que baixa a família de fontes
Open Sans junto com sua página web e permite que você a defina em seus
elementos HTML usando sua própria folha de estilos.
2. Em seguida, exclua a regra existente no seu arquivo estilo.css. Foi um bom teste,
mas o texto vermelho não parece muito bom.
3. Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado
pela linha font-family que você obteve do Google Fonts. (font-family significa apenas
a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma
fonte base global e o tamanho da fonte para a página inteira (já que <html> é o
elemento pai de toda a página, e todos os elementos dentro dele herdam o
mesmo font-size e font-family):
4. html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10
pixels */
5. font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você
obteve no Google Fonts */
}
Copy to Clipboard
Nota: Qualquer coisa em um documento CSS entre /* e */ é um comentário CSS,
que o navegador ignora quando renderiza o código. Este é um lugar para você
escrever notas úteis sobre o que você está fazendo.
 6. Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do
corpo HTML (<h1> (en-US), <li> e <p>). Também centralizaremos o texto do nosso
cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo
do corpo para torná-lo um pouco mais legível:
7. h1 {
8. font-size: 60px;
9. text-align: center;
10. }
11.
12. p, li {
13. font-size: 16px;
14. line-height: 2;
15. letter-spacing: 1px;
}
Copy to Clipboard
Você pode ajustar esses valores de px para o que você desejar, para deixar seu
design com a aparência que quiser, mas no geral seu design deve parecer com
isso:
Caixas, caixas, é tudo sobre caixas
Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas —
indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página
podem ser pensados como caixas umas em cima das outras.
Como esperado, o layout CSS é baseado principalmente no modelo de caixas.
Cada um dos blocks que ocupam espaço na sua página tem propriedades como
essas:
 padding, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).
 border, a linha sólida do lado de fora do padding.
 margin, o espaço externo a um elemento.

Nessa seção nós também vamos usar:

 width (largura de um elemento).
 background-color, a cor atrás do conteúdo de um elemento e do padding.
  color, a cor do conteúdo de um elemento (geralmente texto).
 text-shadow: cria uma sombra no texto dentro de um elemento.
 display: define a maneira de dispor um elemento (não se preocupe com isso ainda).
Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando
essas novas regras à parte inferior da página e não tenha medo de experimentar
alterações nos valores para ver o que aparece.

Mudando a cor da página

html {
background-color: #00539F;
}
Copy to Clipboard
Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a
cor que você escolheu ao planejar seu site.

Separando o corpo
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Copy to Clipboard
Agora para o elemento <body>. Há algumas declarações aqui, então vamos passar
por elas uma a uma:
 width: 600px; — Isso força o corpo a ter 600 pixels de largura.
 margin: 0 auto; — Quando você define dois valores em uma propriedade
como margin ou padding, o primeiro valor afeta a parte superior do elemento e a
parte inferior (tornando-os 0 nesse caso), e no segundo valor os lados
esquerdo e direito (aqui, auto é um valor especial que divide o espaço horizontal
uniformemente entre esquerda e direita). Você também pode utilizar um, três ou
quatro valores, como documentado no final do conteúdo (parte 1).
 background-color: #FF9500; — como antes, isso define a cor de fundo do elemento.
Usamos um tipo de laranja avermelhado no corpo, para opor ao azul escuro no
elemento <html>, mas fique à vontade para ir em frente e experimentar.
 padding: 0 20px 20px 20px; — temos quatro valores definidos no padding, para criar
um pouco de espaço em torno do nosso conteúdo. Dessa vez, estamos definindo
 sem padding na parte superior do corpo, e 20 pixels no lado esquerdo, na parte
inferior e no lado direito. Os valores definem a parte superior, o lado direito, a parte
inferior e o lado esquerdo, nessa ordem. Como com a margin, você também pode
usar um, dois, ou três valores, conforme documentado no final do conteúdo (parte
2).
 border: 5px solid black; — isso simplesmente define uma borda preta sólida de 5
pixels de largura em todos os lados do corpo.

Posicionando e estilizando o título da nossa página principal

h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Copy to Clipboard
Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece
porque os browsers aplicam algumas estilizações padrão ao <h1> (en-US) (entre
outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma
má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem
estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão,
definindo margin: 0;.
Em seguida, definimos o padding das partes superior e inferior do cabeçalho para
20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do
HTML.
Uma propriedade bastante interessante que usaremos aqui é o text-shadow, que
aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os
seguintes:
 O primeiro valor em pixel define o deslocamento horizontal da sombra do texto —
até onde ele se move: um valor negativo deve movê-la para a esquerda.
 O segundo valor em pixel define o deslocamento vertical da sombra do texto — o
quanto ela se move para baixo, neste exemplo; um valor negativo deve movê-la para
cima.
 O terceiro valor em pixel define o raio de desfoque da sombra — um valor maior
significará uma sombra mais borrada.
 O quarto valor define a cor base da sombra.
De novo, tente experimentar com diferentes valores para ver o que você pode criar!

Centralizando a imagem
img {
 display: block;
margin: 0 auto;
}
Copy to Clipboard
Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos
usar novamente o truque margin: 0 auto que aprendemos anteriormente para o
corpo, mas também precisamos fazer outra coisa. O elemento <body> é em nível
de bloco, o que significa que ocupa espaço na página e pode ter margens e outros
valores de espaçamento aplicados a ele. Imagens, por outro lado, são
elementos em linha, o que significa que não podem ter margens. Então, para
aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco
a imagem usando display: block;.
Nota: As instruções acima assumem que você está usando uma imagem menor que
a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá
transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode
1) reduzir a largura da imagem usando um editor gráfico (em inglês) ou 2)
dimensionar a imagem usando CSS definindo a propriedade width no
elemento <img> com um valor menor (por exemplo, 400 px;).
Nota: Não se preocupe se você ainda não entender display: block; ou a distinção
entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais
profundidade. Você pode descobrir mais sobre os diferentes valores de exibição
disponíveis em referência sobre display (parte 2).

Conclusão
Se você seguiu todas as instruções desse artigo, você deve terminar com uma
página parecida com essa:
Se você emperrar, sempre poderá comparar seu trabalho com nosso código
de exemplo finalizado no Github (iniciante-html-site-estilo/estilo.css em gh-pages ·
mdn/iniciante-html-site-estilo · GitHub).
Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao
nosso tópico de aprendizado CSS.

Margin (parte 1)
A propriedade margin do CSS define a área de margem nos quatro lados do
elemento. É uma abreviação que define todas as margens individuais de uma só
vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).

Sintaxe
/* Aplica para todos os quatro lados */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;
/* topo | horizontal | inferior */
margin: 1em auto 2em;

/* topo | direita | inferior | esquerda */

margin: 2px 1em 0 auto;

/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;
Copy to Clipboard

A propriedade margin pode ser especificada usando um, dois, três ou quatro
valores. Cada valor deve ser um <length>, uma <percentage>, ou a palavra-
chave auto. Cada valor pode ser positivo, zero ou negativo.

 Quando um valor é especificado, a mesma margem é aplicada para todos os

quatro lados.
 Quando dois valores são especificados, a primeira margem é aplicada
aos lados superior e inferior, e a segunda aos lados esquerdo e direito.
 Quando três valores são especificados, a primeira margem é apliacada ao topo, a
segunda aos lados esquerdo e direito, e a terceira ao lado inferior.
 Quando quatro valores são especificados, as margens são aplicadas aos
lados superior, direito, inferior e esquerdo, nesta ordem (sentido horário).

Valores
length (en-US)
O tamanho da margem como um valor fixo.
percentage (en-US)
O tamanho da margem como um percetual, relativo à largura do bloco em que o
elemento está contido.
auto
O navegador seleciona uma margem adequada para utilizar. Por exemplo, em
alguns casos este valor pode ser utilizado para centralizar o elemento.

Sintaxe formal
[ (en-US) <length> (en-US) | (en-US) <percentage> (en-US) | (en-US) auto ] (en-US){ (en-
US)1,4} (en-US)

Exemplos
Exemplo simples

HTML

<div class="center">Este elemento está centralizado.</div>

<div class="outside">Este elemento está posicionado fora de seu bloco recipiente.</div>

Copy to Clipboard
CSS

.center {
margin: auto;
background: lime;
width: 66%;
}

.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
Copy to Clipboard

Mais exemplos
margin: 5%; /* todos os lados: margem de 5% */

margin: 10px; /* todos os lados: margem de 10px */

margin: 1.6em 20px; /* topo e inferior: margem de 1.6em */

/* esquerda e direita: margem de 20px */

margin: 10px 3% 1em; /* topo: margem de 10px */

/* esquerda e direita: margem de 3% */
/* inferior: margem de 1em */

margin: 10px 3px 30px 5px; /* topo: margem de 10px */

/* direita: margem de 3px */
/* inferior: margem de 30px */
/* esquerda: margem de 5px */

margin: 2em auto; /* topo e inferior: margem de 2em */

/* caixa está horizontalmente centralizada */

margin: auto; /* topo e inferior: margem de 0 */

/* caixa está horizontalmente centralizada */
Copy to Clipboard

Notas
Centralização horizontal

Para centralizar algo horizontalmente em navegadores modernos, você pode

utilizar display: flex; justify-content: center;

Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox,
estes não estão disponíveis. Para centralizar um elemento dentro de seu pai,
use margin: 0 auto; .

Colapso de margens
Às vezes, as margens superior e inferior de elementos são colapsadas em uma
única margem que é igual à maior das duas margens.

Especificações
Especificação Status Comentário
CSS Box Model
The definition of 'margin' Candidata a Recomendação Nenhuma mudança significativa.
in that specification.
CSS Transitions
The definition of 'margin' Rascunho atual Define margin como animável.
in that specification.
CSS Level 2
(Revision 1) Remove seu efeito em
Recomendação
The definition of 'margin' elementos inline.
in that specification.
CSS Level 1
The definition of 'margin' Recomendação Definição inicial.
in that specification.
as each of the properties of the shorthand:

 margin-bottom: 0
Initial value  margin-left (en-US): 0
 margin-right (en-US): 0
 margin-top: 0

all elements, except elements with table display types other

Aplica-se a than table-caption, table and inline-table. It also applies to ::first-
letter and ::first-line.
Inherited não
Percentages refer to the width of the containing block
as each of the properties of the shorthand:

 margin-bottom: the percentage as specified or the absolute

length
 margin-left (en-US): the percentage as specified or the
Computed value absolute length
 margin-right (en-US): the percentage as specified or the
absolute length
 margin-top: the percentage as specified or the absolute
length

Animation type a length

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
 desktop mobile
Intern Chro Firef Oper Sams WebVi
et me ox for a Safa ung ew
Chro Firef Explo Ope Safa Andr Andr Andr ri on Intern Androi
me Edge ox rer ra ri oid oid oid iOS et d
1 12 1 3 3.5 1 18 4 10.1 1 1.0 1
Toggl Toggl Togg Toggl Tog Tog Toggl Toggl Toggl Tog Toggle Toggle
marg
in
e e le e gle gle e e e gle history history
histor histor histo histor histo histo histor histor histor histo
y y ry y ry ry y y y ry
1 12 1 6 3.5 1 18 4 14 1 1.0 37
Toggl footn Togg footno Tog Tog Toggl Toggl Toggl Tog Toggle Toggle
e ote le te gle gle e e e gle history history
auto histor Toggl histo Toggl histo histo histor histor histor histo
y e ry e ry ry y y y ry
histor histor
y y

Padding
A propriedade padding define uma a distância entre o conteúdo de um elemento e
suas bordas. É um atalho que evita definir uma distância para cada lado
separadamente (padding-top, padding-right, padding-bottom, padding-left).

/* Aplica-se à todas as bordas */

padding: 1em;

/* vertical | horizontal */

padding: 5% 10%;

/* superior | horizontal | inferior */

padding: 1em 2em 2em;

/* superior | direita | inferior | esquerda */

padding: 2px 1em 0 1em;

/* Valores globais */

padding: inherit;

padding: initial;

padding: unset;

Copy to Clipboard
 as each of the properties of the shorthand:

 padding-bottom (en-US): 0
Initial value  padding-left: 0
 padding-right (en-US): 0
 padding-top (en-US): 0

all elements, except table-row-group, table-header-group, table-footer-

Aplica-se a group, table-row, table-column-group and table-column. It also applies
to ::first-letter and ::first-line.
Inherited não
Percentages refer to the width of the containing block
as each of the properties of the shorthand:

 padding-bottom (en-US): the percentage as specified or the absolute

length
Computed
 padding-left: the percentage as specified or the absolute length
value  padding-right (en-US): the percentage as specified or the absolute
length
 padding-top (en-US): the percentage as specified or the absolute
length

Animation type a length

Sintaxe
A propriedade padding pode ser utilizada usando um, dois, três ou todos os quatro
valores. Cada valor é um <comprimento> ou uma <porcentagem>.

 Quando um único é valor utilizado, ele se aplica a todos os quatro lados.

 Se Dois valores forem utilizados o primeiro se aplica às bordas verticais (superior e
inferior) e o segundo se aplica às bordas horizontais (esquerda e direita).
 Quando Três valores são utilizados o primeiro se aplica à borda superior, o
segundo será utilizado tanto para a borda esquerda quanto para a borda direita. O
terceiro será aplicado à borda inferior.
 Com Quatro valores a ordem de aplicação é: superior, direita, inferior e
esquerda (de acordo com o movimento dos ponteiros do relógio).

Valores
<comprimento>

Media do comprimento. Não pode ser negativo.

<porcentagem>

Valor percentual que é aplicado em relação à largura do bloco contido.

Sintaxe formal
[ (en-US) <length> (en-US) | (en-US) <percentage> (en-US) ] (en-US){ (en-US)1,4} (en-US)

Exemplos
padding: 5%; /* padding 5% em todos os lados */

Copy to Clipboard

padding: 10px; /* padding 10px em todos os lados */

Copy to Clipboard

padding: 10px 20px; /* 10px acima e abaixo */

/* 20px esquerda e direita */

Copy to Clipboard

padding: 10px 3% 20px; /* 10px acima */

/* 3% esquerda e direita */

/* 20px abaixo */

Copy to Clipboard

padding: 1em 3px 30px 5px; /* acima 1em padding */

/* direita 3px padding */

/* abaixo 30px padding */

/* esquerda 5px padding */

Copy to Clipboard

border:outset; padding:5% 1em;

Amostra
HTML

<h4>Hello world!</h4>

<h3>O padding é diferente nesta linha.</h3>

Copy to Clipboard
CSS
h4{

background-color: green;

padding: 50px 20px 20px 50px;

h3{

background-color: blue;

padding: 400px 50px 50px 400px;

Copy to Clipboard

Especificações
Especificação Status Observações
CSS Box Model
Candidata a
The definition of 'padding' in that Sem alteração
Recomendação
specification.
CSS Level 2 (Revision 1)
The definition of 'padding' in that Recomendação Sem alteração
specification.
CSS Level 1
Definição
The definition of 'padding' in that Recomendação
inicial
specification.

Compatibilidade
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não
convertemos os dados que ela contém.

Edg Internet Safari

Feature Chrome Firefox (Gecko) Opera
e Explorer (WebKit)
Basic
1.0 (Yes) 1.0 (1.0) 4.0 3.5 1.0 (85)
support
Edg Firefox Mobile Opera
Feature Android IE Phone Safari Mobile
e (Gecko) Mobile
Basic
? (Yes) ? ? ? ?
support