SdevLab – Tutorial | CSS Margin

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Margin

A propriedade margin, como o próprio nome  sugere, define as regras para as margens dos elementos da página. A lista de propriedades está listada na tabela abaixo:

Propriedade Descrição Opções
margin-top define a margem superior
  1. auto: valor default da margem
  2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
  3. %: porcentagem da largura
margin-right define a margem direita Idem
margin-bottom define a margem inferior Idem
margin-left define a margem esquerda Idem

Copie e cole o exemplo abaixo em algum editor de textos e execute o arquivo para ver o resultado.

<html>
<head>
<style type="text/css">
<!--
p {margin-top: 2cm; margin-left: 2cm;}
-->
</style>
<title>Teste 6</title>
</head>
<body>
<p>Neste parágrafo colocamos margem esquerda e superior de 2 cm.</p>
</body>
</html>

Assim como a propriedade font, os atributos da propriedade margin podem ser agrupados (margens superior, direita, inferior e esquerda nesta ordem), como no exemplo:

p {margin: 20px 40px 80px 5px;}

Existem outras 3 maneiras de se agrupar os atributos de uma margem, que são as seguintes:

  • margin: valor1 —> as 4 margens terão valor escolhido;
  • margin: valor1,valor2 —> margem superior e inferior com valor 1 | margem direita e esquerda valor 2;
  • margin: valor1,valor2,valor3 —> margem superior terá valor 1 | margem direita e esquerda terão valor 2 | margem inferior terá valor 3

Até a próxima!

xD

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS Margin

  1. Pingback: Tutorial CSS básico – Border « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s