3

Possuo uma página .xhtml e o primeiro elemento a ser colocado é uma div(content) e eu defino para ela uma margem superior(margin-top) de 30%.

Supostamente, pelo que entendo, esta porcentagem deveria ser tirada a altura da minha tela, no meu caso tenho uma tela de 1600 × 795 e os 30% seriam tirados dos 795px.

Vejam o que acontece:

#content
{
  width: 300px;
  height: 200px;
  margin: 0 auto;
  margin-top: 50%;
  background: red;
}
<div id="content">
</div>

No exemplo eu coloque 50% de margin-top para poder passar a percepção do que ocorre. Ele deveria estar a 50% do topo mais parece ter descido muito mais.

1
  • O Fiddle não está passando a ideia a 100% mas acredito que já ajuda.
    – Cold
    20/10/2014 às 11:27

4 Respostas 4

3

Realmente se você for simplesmente pela lógica daria a entender que o margin-top e margin-bottom quando especificados em % seriam um valor referente a altura do elemento pai, porém não é assim que funciona.

Quando a margem é especificada em '%' ela sempre vai ser referente a largura (width) do elemento pai, você pode conferir isso facilmente redimensionando a janela, você vai ver que o elemento vai mudar de posição apenas quando você alterar a largura da janela.

1
0

Mexi um pouco no seu CSS e ta ai:

#content
{
width: 300px;
height: 200px;
position: absolute;
top: 0; 
bottom: 0;
left: 0; 
right: 0;
margin: auto;
background: red;
}
<div id="content">
</div>

Creio que assim já resolva seu problema

2
  • obrigado, mas a minhq questão não é fazer a coisa funcionar é perceber como ela funciona. A tua solução centraliza totalmente o elemento (se percebi bem), mas no meu exemplo eu queria perceber porquê o margin-top funcionou do jeito que funcionou.
    – Cold
    20/10/2014 às 12:14
  • então realmente sua pergunta não foi muito clara ... ou devo ter algum problema mental rs
    – Otto
    20/10/2014 às 12:27
0

adiciona no css da div #content

display: table-caption;
1
  • 2
    A sua resposta ficaria mais completa se você adicionasse uma pequena explicação em como isso resolve o problema.
    – ramaral
    20/10/2014 às 13:51
0

Como já foi dito, margin e padding com porcentagem, utilizam da largura do elemento. O margin se baseia no elemento pai. E o padding se baseia no próprio elemento.

Se sua intenção era que o elemento, ou seja, seu #content fique centralizado, você deve fazer como no exemplo a seguir.

 #content {
     position: absolute;
     display: block;
     width: 200px;
     height: 200px;
     top: calc(50% - 100px);
     left: calc(50% - 100px);
 }

no exemplo eu digo que meu #content terá uma distância de 50% do topo do próximo elemento pai que tenha position: relative, menos a metade da altura do meu elemento, pois quando usamos o atributo top, ele se referencia pelo topo do elemento e não pelo centro. Do mesmo jeito para o left, só que a distância é de 50% menos a metade da largura do elemento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .