From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/margin/index.html | 172 ++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/pt-br/web/css/margin/index.html (limited to 'files/pt-br/web/css/margin') diff --git a/files/pt-br/web/css/margin/index.html b/files/pt-br/web/css/margin/index.html new file mode 100644 index 0000000000..037d22b5b0 --- /dev/null +++ b/files/pt-br/web/css/margin/index.html @@ -0,0 +1,172 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

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: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, e {{cssxref("margin-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

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;
+
+ +

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.

+ + + +

Valores

+ +
+
{{cssxref("length")}}
+
O tamanho da margem como um valor fixo.
+
{{cssxref("percentage")}}
+
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

+ +
{{csssyntax}}
+ +

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>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example','100%',120) }}

+ +

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 */
+
+ +

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. Veja Dominando margin collapsing para mais informações.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Nenhuma mudança significativa.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Define margin como animável.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Remove seu efeito em elementos inline.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Definição inicial.
+ +

{{cssinfo}}

+ +

Compatibilidade de navegadores

+ + + +

{{Compat("css.properties.margin")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf