tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS margens


CSS Margin Propriedades

As CSS margin propriedades são usadas para gerar espaço em torno de elementos.

As margin propriedades definir o tamanho do espaço em branco fora da fronteira.

Este elemento tem uma margin de 80px.


CSS Margins

As CSS margin propriedades definir o tamanho do espaço em branco fora da fronteira.

NotaNota: As margins são completamente transparentes - e não pode ter uma cor de fundo!

Com CSS, você tem total controle sobre as margins . Há propriedades CSS para definir a margin para cada lado de um elemento (em cima, à direita, inferior e esquerda).


Margin - Sides individuais

CSS tem propriedades para especificar a margin de cada lado de um elemento:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Todas as margin propriedades podem ter os seguintes valores:

  • auto - o navegador calcula a margin
  • comprimento - especifica uma margin em px, pt, cm , etc.
  • % - Especifica uma margin em% da largura do elemento contendo
  • herdar - especifica que a margin deve ser herdado do elemento pai
NotaNota: É também possível utilizar os valores negativos para margins ;a sobrepor-se o conteúdo.

O exemplo a seguir define diferentes margins para todos os quatro lados de um <p> elemento:

Exemplo

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Tente você mesmo "

O exemplo a seguir permite que a esquerda margin ser herdado do elemento pai:

Exemplo

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Tente você mesmo "

Margin - Propriedade Taquigrafia

Para encurtar o código, é possível especificar todas as margin propriedades em uma propriedade.

A margin propriedade é um atalho para as seguintes individuais margin propriedades:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Exemplo

p {
    margin: 100px 150px 100px 80px;
}
Tente você mesmo "

Então, aqui está como funciona:

Se a margin propriedade tem quatro valores:

  • margin : 25px 50px 75px 100px;
    • margem superior é 25px
    • margem direita é 50px
    • margem inferior é de 75px
    • margem esquerda é 100px

Se a margin propriedade tem três valores:

  • margin : 25px 50px 75px;
    • margem superior é 25px
    • margens direita e esquerda são 50px
    • margem inferior é de 75px

Se a margin propriedade tem dois valores:

  • margin : 25px 50px;
    • margens superior e inferior são 25px
    • margens direita e esquerda são 50px

Se a margin propriedade tem um valor:

  • margin : 25px;
    • todas as quatro margens são 25px

Aplicar o valor de auto

Você pode definir a margin propriedade para auto para centrar horizontalmente o elemento dentro de seu recipiente.

O elemento, então, tomar-se a largura especificada, eo espaço restante será dividido igualmente entre a esquerda ea direita margins :

Exemplo

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Tente você mesmo "

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»


Todas as propriedades CSS Margem

Propriedade Descrição
margin Um atalho para definir as margin propriedades em uma declaração
margin-bottom Define a parte inferior margin de um elemento
margin-left Define a esquerda margin de um elemento
margin-right Define-se o direito margin de um elemento
margin-top Define a parte superior margin de um elemento