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-bottom/index.html | 135 +++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 files/pt-br/web/css/margin-bottom/index.html (limited to 'files/pt-br/web/css/margin-bottom/index.html') diff --git a/files/pt-br/web/css/margin-bottom/index.html b/files/pt-br/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..a2990e2ba6 --- /dev/null +++ b/files/pt-br/web/css/margin-bottom/index.html @@ -0,0 +1,135 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

A propriedade CSS  margin-bottom  define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.

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

The effect of the CSS margin-bottom property on the element box

+ +

A propriedade não tem efeito em non-replaced elementos inline, como {{HTMLElement("span")}} ou {{HTMLElement("code")}}.

+ +

Sintaxe

+ +
/* <length> values */
+margin-bottom: 10px;  /* Um tamanho absoluto */
+margin-bottom: 1em;   /* relativo ao tamanho do texto */
+margin-bottom: 5%;    /* relativo à largura do container do bloco mais próximo */
+
+/* Keyword values */
+margin-bottom: auto;
+
+/* Global values */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

A propriedade margin-bottom é especificada como a palavra chave auto, ou a <length>, ou a<percentage>. Esse valor pode ser positivo, zero ou negativo

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
O tamanho de uma margin com um valor fixo
+
{{cssxref("<percentage>")}}
+
O tamanho de uma margin como porcentagem, é relativa com o tamanho do bloco pai.
+
auto
+
O navegador seleciona um valor adequado para usar. Veja {{cssxref("margin")}}.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

HTML

+ +
<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+ +

CSS

+ +

CSS para definir margin-bottom e height

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

Algumas definições para container e divs, para que o os efeitos de margin possam ser vistos com mais clareza

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

{{ EmbedLiveSample('Example',350,200) }}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}Nenhuma mudança significativa
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Definir o margin-bottom como "animavel"
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Remove seu efeito nos elementos in-line.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Definição inicial
+ +

{{cssinfo}}

+ +

Compatibilidade dos Browsers

+ + + +

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

-- cgit v1.2.3-54-g00ecf