[Resolvido] width junto do margin

[Plástico Bolha 0]

Oi pessoal, por favor alguem pode me explicar qual a relação que "width" tem com "margin". Porque eu fiz um teste, eu fiz isso:

 

#aaa{ 
       width: 0px;
margin: 0px auto 0px auto; 
}

 

O que aconceu foi o seguinte, eu usei essa ID em uma imagem e obtive o seguinte resultado. Se eu tirar o width então a imagem não sai do lugar mesmo com o "0px auto 0px auto;", e quando eu deixava o width e tirava o margin, a imagem tambem não saia do lugar. E se eu deixar os 2 juntos então a imagem vai para o meio. Não tenho dúvidas sobre o que margin pode fazer com os itens "0px auto 0px auto". O fato é que não compreendi porque o margin se comporta dessa forma quando esta com width (largura), eu não compreendi o porque disso.

 

Obrigado pela paciência :thumbsup:

[Henrique Barcelos 290]

Se você não declara uma largura, não tem como o navegador calcular a margem "automática" que você deseja.

Para centralizar um elemento desse jeito, você PRECISA informar qual é sua largura exata.

[Plástico Bolha 0]

Isso quer dizer que width: 0px; é a mesma coisa que width: auto; ?

[Diéssica 140]

Isso quer dizer que width: 0px; é a mesma coisa que width: auto; ?

width:0 = 0 de largura

width:auto = largura automática (100% por padrão) — preenchendo todo o ecrã

 

E o que o Henrique quis dizer é que tu precisa de uma largura fixa pra centralizar um elemento.

 

Tu consegue centralizar algo que preenche todo o ecrã (pois, sem determinar o width, a largura é 100%)?

R: não, porque ele preenche todo o ecrã.

 

O que aconceu foi o seguinte, eu usei essa ID em uma imagem e obtive o seguinte resultado. Se eu tirar o width então a imagem não sai do lugar mesmo com o "0px auto 0px auto;", e quando eu deixava o width e tirava o margin, a imagem tambem não saia do lugar. E se eu deixar os 2 juntos então a imagem vai para o meio. Não tenho dúvidas sobre o que margin pode fazer com os itens "0px auto 0px auto". O fato é que não compreendi porque o margin se comporta dessa forma quando esta com width (largura), eu não compreendi o porque disso.

margin:auto = margem automática em relação ao elemento e sua largura. Se tu tirar o width, a largura não vai ser determinada (vai manter o padrão de 100%) e a margem automática não vai acontecer.

 

Claro que, o que aconteceu, foi nada a ver mesmo. A tua imagem não respeitou os limites, passando da largura determinada (0 pixels). Só que antes 0 do que 100%, aí a imagem usou sua própria largura com margem automática.

 

Resultado:

largura da imagem + margem automática = imagem centralizada.

[Henrique Barcelos 290]

:clap:

[Plástico Bolha 0]

Valeu pela atenção de vocês :thumbsup: