Este tutorial abordará duas coisas: margens externas e margens externas. Vamos começar com as margens externas. Para um elemento p definido diretamente dentro do elemento body, as instruções para margem esquerda e direita significam a distância em relação às margens externas do elemento body. Se vários parágrafos se seguirem, as instruções para margem externa superior e inferior significam a distância entre os parágrafos individuais. Aliás, também são possíveis valores negativos na definição das margens externas e das margens, o que permite sobreposições.
Definindo a margem externa
Margem e distância são os espaços em branco forçados entre o elemento atual e seu elemento pai ou vizinho. As seguintes propriedades CSS em elementos HTML que criam um parágrafo próprio ou um bloco são úteis.
No caso de margin, trata-se da forma abreviada das quatro propriedades margin-top, margin-right, margin-bottom e margin-left. Os seguintes valores são possíveis:
• auto - a margem externa é calculada automaticamente.
• Porcentagem - refere-se ao elemento para o qual a margem foi especificada.
• Valor de comprimento - valores negativos também são permitidos, o que permite a sobreposição de elementos.
São permitidos até quatro valores:
• um valor - margem externa acima, abaixo, à esquerda e à direita
• dois valores - primeiro valor para a margem externa acima e abaixo, segundo valor para a margem externa direita e esquerda
• três valores - primeiro valor para a margem externa acima, segundo valor para a margem direita e esquerda, terceiro valor para a margem externa abaixo
• quatro valores - primeiro valor para a margem externa acima, segundo para a direita, terceiro para baixo e quarto para a esquerda.
O exemplo a seguir mostra o uso das propriedades margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Configuração do Rig da Câmera</p>
<p class="ex">Neste treinamento em vídeo, você aprenderá a montar um Rig de Câmera e a movê-lo com segurança pelo espaço 3D. Um arquivo de projeto está incluso.</p>
</body>
</html>
Neste exemplo, foram definidos dois parágrafos de texto.
Além disso, foram atribuídas margens para o segundo parágrafo.
margin: 30px 50px 30px 50px;
Essa indicação significa o seguinte:
• 30 pixels de margem superior
• 50 pixels de margem à direita
• 30 pixels de margem inferior
• 50 pixels de margem à esquerda
Especificar informações individuais para as margens
Antes, foi apresentada a especificação geral de margin. No entanto, também é possível fazer especificações individuais. Por meio das seguintes propriedades, é possível determinar a margem superior, esquerda, inferior ou direita de um elemento individualmente.
• margin-top - margem externa/acima
• margin-right - margem externa/direita
• margin-bottom - margem externa/abaixo
• margin-left - margem externa/esquerda
Para todas as quatro propriedades, os seguintes valores podem ser usados:
• auto - a margem externa é calculada automaticamente.
• Porcentagem - refere-se ao elemento para o qual a margem- [superior, direita, inferior, esquerda] foi especificada.
• Valor de comprimento - valores negativos também são permitidos, o que permite a sobreposição de elementos.
O exemplo a seguir mostra como as informações individuais de margem podem ser usadas de forma eficaz.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Configuração do Rig da Câmera</p>
<p class="ex">Neste treinamento em vídeo, você aprenderá a montar um Rig de Câmera e a movê-lo com segurança pelo espaço 3D. Um arquivo de projeto está incluso.</p>
</body>
</html>
No navegador, o resultado se parece com o seguinte:
Definindo o preenchimento interno
No preenchimento interno, trata-se do espaço forçado entre o conteúdo do elemento e sua própria borda do elemento. As seguintes propriedades CSS são úteis em elementos HTML que criam um parágrafo próprio ou um bloco.
No caso de padding, trata-se da forma abreviada das quatro propriedades padding-top, padding-right, padding-bottom e padding-left. Por meio disso, pode-se definir a largura entre a moldura e o conteúdo de um elemento, ou seja, o preenchimento interno.
• Porcentagem - refere-se ao elemento pai.
• Valor de comprimento
Até quatro valores podem ser especificados:
• um valor - preenchimento interno acima, abaixo, à esquerda e à direita
• dois valores - primeiro valor para o preenchimento interno acima e abaixo, segundo valor para o preenchimento interno direita e esquerda
• três valores - primeiro valor para o preenchimento interno acima, segundo valor para o preenchimento interno direita e esquerda, terceiro valor para o preenchimento interno abaixo
• quatro valores - primeiro valor para o preenchimento interno acima, segundo para a direita, terceiro para baixo e quarto para a esquerda.
Segue um exemplo relacionado.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Montar um rig de câmera</p>
<p class="ex">Neste vídeo tutorial, você aprenderá como criar um rig de câmera e movê-lo com segurança pelo espaço 3D. Um arquivo de projeto está incluído.</p>
</body>
</html>E aqui está o resultado no navegador:
As quatro propriedades de padding permitem definir os espaçamentos internos. As seguintes quatro propriedades CSS estão disponíveis para isso:
• padding-top – Espaço entre a parte superior do conteúdo e a borda superior
• padding-bottom – Espaço entre a parte inferior do conteúdo e a borda inferior
• padding-left – Espaço entre a parte esquerda do conteúdo e a borda esquerda
• padding-right – Espaço entre a parte direita do conteúdo e a borda direita.
Para todas as quatro propriedades, os seguintes valores podem ser utilizados:
• Percentual - refere-se ao elemento pai
• Comprimento
