margin-top

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Sumário

The effect of the CSS margin-top property on the element box A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.

Essa propriedade não tem efeito em elementos non-replaced inline elements, como <tt> ou <span>.

Initial value	`0`
Aplica-se a	all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`.
Inherited	não
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length
Animation type	a length

Sintaxe

css

/* Valores <length> */
margin-top: 10px; /* An absolute length */
margin-top: 1em; /* A length relative to the text size */
margin-top: 5%; /* A margin relative to the nearest block container's width */

/* Valores padrão */
margin-top: auto;

/* Valores globais */
margin-top: inherit;
margin-top: initial;
margin-top: unset;

Valores

<length>: Especifica um tamanho fixo. Veja <length> para possíveis valores.
<porcentagem>: Um <percentage> sempre relativo ao width do bloco.
auto: Veja margin.

Sintaxe formal

margin-top = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Exemplos

css

.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}

Especificações

Specification
CSS Box Model Module Level 3 # margin-physical

Compatibilidade de navegadores

BCD tables only load in the browser