elemento pai herdando margem

Jair Humberto · Março 12, 2010

Olá pessoal,

Porque às vezes, quando colocamos margem em um elemento bloco, ele em vez de ficar com a margem, repassa ela para o elemento pai?

Para vocês entenderem melhor o que estou falando, criei aqui um exemplo onde ocorre isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Teste com css</title>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0
            }

            body {
                margin: 5px;
                font-family: sans-serif;
                font-size: 12px
            }

            .coluna {
                width: 200px;
                background: #d00
            }

            .conteudo {
                margin: 5px;
                background: #900
            }

            .anuncio h1 {
                text-align: center;
                line-height: 30px;
                font-size: 12px;
                background: #700;
                color: white;
            }

        </style>
    </head>
    <body>
        <div class="coluna">
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
        </div>
        <div class="coluna">
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anúncio</div></div>
        </div>
    </body>
</html>

a div coluna não tem margem alguma, somente a div conteudo é que possui margem.

No entanto a ultima div conteudo de cada div coluna, está repassando a margem de baixo

para a div coluna, que é seu elemento pai. fazendo com que a ultima div conteudo fique sem margem de baixo

e com que a div coluna ganhe uma margem indesejada em baixo.

Testei esse codigo no firefox, safari e ie6. Somente no ie6 o problema não ocorreu, renderizando da forma aparentemente

correta.

Alguém sabe porque isso ocorre?

Desnickadu · Março 12, 2010

ele fica sem "borda" embaixo por causa do esquema que você fez pra SIMULAR bordas.

acabou o conteudo, acaba o 'div', como você não tem um 'padding-bottom' na '.coluna' ele não deixar espaço vago pra deixar o BG da '.coluna' aparecer.

em vez de fazer esse esquema estranho, trabalha com bordas.

resolve o problema do margin que empurra o pai pra baixo e fica muito mais semantico '-'

Jair Humberto · Março 15, 2010

Olá Desnickadu,

Tem certeza do que você ta falando? :mellow:

Isso só foi um exemplo, na realidade as margens que estou setando no meu site, estão afetando outros elementos e não os proprios. E o que quero é margem, não borda. Afinal o conteudo do elemento pai é branco e para usar bordas teriam que ser brancas para dar o efeito de margem desejado. Isso pra mim é que não está parecendo semântico! :/

Desculpe a minha ignorância no assunto, mas não entendi quase nada do que você disse. Porque achou estranho usar margem para separar um elemento da borda? E porque disse que a div acaba quando acaba conteudo? Isso explica o porque de apenas a ultima div estar com a margem errada?

Observe que não é que a div não tenha levado a margem. Mas sim, que a margem da div afetou o elemento pai e não a propria div como era esperado!

eu testei isso no ff , safari e ie6. Apenas no ie6 o resultado foi o esperado

:/

Thiago Retondar · Março 15, 2010

Acredito que esse é o efeito que deseja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Teste com css</title> 
        <style type="text/css"> 
 
            * {
                margin: 0;
                padding: 0
            }
 
            body {
                margin: 5px;
                font-family: sans-serif;
                font-size: 12px
            }
 
            .coluna {
                width: 200px;
                background: #d00
            }
 
            .conteudo {
		border: 5px solid #D00;
		background: #900;
            }
 
            .anuncio h1 {
                text-align: center;
                line-height: 30px;
                font-size: 12px;
                background: #700;
                color: white;
            }
 
        </style> 
    </head> 
    <body> 
        <div class="coluna"> 
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anÃºncio</div></div> 
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anÃºncio</div></div> 
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anÃºncio</div></div> 
        </div> 
        <div class="coluna"> 
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anÃºncio</div></div> 
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anÃºncio</div></div> 
            <div class="anuncio"><h1>Titulo</h1><div class="conteudo">Texto do anÃºncio</div></div> 
        </div> 
    </body> 
</html>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Jair Humberto · Março 15, 2010

Não Thiago, eu não quero isso. Esse arquivo foi só um exempo pra ilustrar o problema que estou tendo. A página real é gigantescamente grande e faz parte de um sistema muito complexo, e talvez eu não conseguiria passar para vocês e reproduzir exatamente o erro que está dando. Por isso, eu montei esse exemplo simples que reproduz exatamente o erro que eu quero,

Apenas prestem atenção na ultima div de cada '.coluna' ela esta 'repassando a margem que deveria ser dela para a div ".coluna"' e está parecendo que eu setei 'margin-bottom: 5px' para a div '.coluna'. O que não fiz.

Esse problema está acontecendo em diversos pontos da página. Aí eu seto uma margem para separar certo elemento de outro e em vez de ele separar, sua margem afeta o layout inteiro, empurrando ele para baixo (no caso de margin-top).

Setar uma borda é que não é correto. Seria o mesmo que usar gifs em branco para espaçamento.

Thiago Retondar · Março 15, 2010

Entendi. A coluna não estava herdando nada. Veja por essa imagem:

Imagem Postada

A solução é colocar um overflow:hidden na .coluna.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Jair Humberto · Março 15, 2010

Agora deu um nó na minha cabeça. O overflow resolve isso! mas porque? o.O

Agora que entendi o que o Desnickadu falou. Na verdade a div '.coluna'

acaba onde acaba o texto das divs filhas excluindo suas margens. E a margem das filhas parece

não ser considerado conteudo.

Então, apenas parece que a margem está afetando a div '.coluna', mas o que acontece é que a margem

da ultima '.conteudo' está "vazando" (overflow) para baixo dos limites da '.coluna'

Bom, eu entendi o que está acontecendo. Mas não entendi o porquê disso! que é o que eu queria saber.

Afinal, as margens das laterais e a margem de cima não sofre esse problema. Apenas as de baixo! o.O

Outra coisa. Porque o Desnickadu falou "o div" em vez de "a div"? O div se refere ao elemento? Mas a div

se refere à tag... não é? Qual é o correto?

Bergs · Março 15, 2010

Realmente meu chapa sua marcação esta como Desnickadu disse, muito confusa,

colocando margim 5px no body só vai dar dor de cabeça!

vê se é isso que você esta precisando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Teste com css</title>
        <style type="text/css">

           *{ 
        	margin: 0;
               padding: 0;
            }
            body {
                font-family: sans-serif;
                font-size: 12px;
            }
			
            .anuncio h1 {
                text-align: center;
                line-height: 30px;
                font-size: 12px;
                background: #700;
                color: white;
            }

            .coluna {
                width: 200px;
                background: #d00;
				
            }

            .conteudo {
                background: #900;
		border: 5px solid #f00;	
		}


        </style>
    </head>
    <body>
        <div class="coluna">
            <div class="anuncio"><h1>Titulo</h1></div><div class="conteudo">Texto do anúncio</div>
            <div class="anuncio"><h1>Titulo</h1></div><div class="conteudo">Texto do anúncio</div>
            <div class="anuncio"><h1>Titulo</h1></div><div class="conteudo">Texto do anúncio</div>
		</div>
        <div class="coluna">
            <div class="anuncio"><h1>Titulo</h1></div><div class="conteudo">Texto do anúncio</div>
            <div class="anuncio"><h1>Titulo</h1></div><div class="conteudo">Texto do anúncio</div>
            <div class="anuncio"><h1>Titulo</h1></div><div class="conteudo">Texto do anúncio</div>
        </div>
    </body>
</html>

Thiago Retondar · Março 15, 2010

Em miúdos: coloquei overflow apenas para mostrar, nesse caso, o que é visível.

Eu falo o div, pois me refiro ao elemento. mas as vezes, na pressa, solto um a div mesmo. :P

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Jair Humberto · Março 16, 2010

Pô Thiagão não ponha resolvido no topico ^^, pois o que quero saber é o porquê disso acontecer. Pois nas margens laterais isso não ocorre. Afinal esse problema eu já tinha resolvido de outra forma (embora o overflow seja mais criativo). Mas meu interesse em saber porquê isso ocorre.

Outra coisa, não entendi o overflow. Pra mim, overflow hidden era esconder o que estava vazando não pra mostrar o que é visível.

Desculpe a "encheção de saco" mas, eu queria saber :P , ^^.

Mas pode deixar que estarei pesquisando também.

Bergs, amigão do coração. Eu disse mil vezes q meu problema é com margem. Desculpem se pareceu borda, mas eu queria que vocês

prestassem atenção na margem!

Bergs · Março 16, 2010

eu até me equivoquei falando do margin no body, mas certamente não é a div

filho que vai passar a herança para a div pai, se você quer este efeito que

já foram mostrados utilize-os, no meu ponto de vista o tópico esta resolvido ;) .

Desnickadu · Março 16, 2010

div é um artigo indefinido :P

pode usar tanto 'a div'[tag] como 'o div'[elemento] que não diferença, ela[e] não ficar ofendido xD

Eu digo 'o div' porque o Tiu Uill que foi quem me ensinou a trabalhar com CSS e xHTML fala assim :D

Em todo caso, o 'overflow' escondeu o que estava ultrapassando o div em questão.

'overflow' trata o conteudo e não o div ;)

Jair Humberto · Março 16, 2010

Bergs, mas eu queria saber é porquê issso ocorre, por isso eu num considero resolvido o tópico.

veja que para ter lógica esse problema deveria acontecer não só com a margem de baixo, mas com a de cima e com as

laterais.

resolver a questão não era o problema. Muito embora a solução do overflow tenha me surpreendido, e ainda surpreende e tenha sido

muito bem vinda.

Eu nem mesmo queria o efeito que mostrei. só foi um exemplo. Meu problema é só aquela margemzinha malvada lá que não é considerada

como conteudo pela div pai.

E você está certo mesmo. A principio, deu a impressão que a div pai é que estava herdando a margem hehehe, apesar de fora de lógica,

acreditei nos meus olhos rsrsrsrsr. Porém depois que o thiago mostrou lá, aí eu vi o problema, que inclusive o Desnickadu falou.

Em todo caso, o 'overflow' escondeu o que estava ultrapassando o div em questão.

'overflow' trata o conteudo e não o div ;)

Descnickadu, isso eu não entendi ainda! o.O Desculpe hehehe. mas se ele está escondendo... porque que ao seta-lo, a div '.coluna'

passa a 'reconhecer' a margem da div filha?

Desnickadu · Março 16, 2010

se o 'hidden' esta te encomodando você pode por 'auto' que tb resolve o problema da mesma forma xD~~

agora, o porque disso eu não sei não Oo'

William Bruno · Março 16, 2010

[Off] ^_^ mania minha

Eu digo 'o div' porque o Tiu Uill que foi quem me ensinou a trabalhar com CSS e xHTML fala assim :D

Jair Humberto · Março 17, 2010

Salve Galera,

Estive pesquisando sobre o assunto e descobri o que está acontecendo e também encontrei resposta para

alguns dos porquês.

Antes de qualquer coisa, obrigado pelas respostas de todos.

O que está acontecendo não é a div pai herdando a margem da div filha, e nem que esteja se recusando a

mostrar o conteudo completo, incluindo a margem da div filha, mas sim as margens verticais estão

entrando em "colapso". Desculpem o termo, mas não consegui encontrar tradução adequada para "collapse"

para este caso.

Isso só ocorre entre elementos bloco e somente nas margens verticais. Isso no css 2.1. Como

tem essa observação na w3c não sei se no css 3 está previsto para as margens horizontais também.

Após entender o problema, ficou bem mais fácil montar um exemplo que funcionasse também no IE6

<html>

    <head>
        <title>margin collapse</title>
        <style type="text/css">

        #azul {
            margin: auto;
            background: blue;
        }

        #verde {
            margin-top: 100px;
            background: green;
        }

        </style>

    </head>

    <body>
        <div id="azul">
            <div id="verde">conteudo</div>
        </div>
    </body>

</html>

Eu estava pensando que se tratava de um bug, mas agora vi que na verdade é o ie6 que interpreta, muitas vezes,

erroneamente "margin collapse".

(Vejam que agora podemos perceber que overflow não resolve a questão para o ie6)

Quando uma margem vertical de um elemento bloco, encontra com outra margem vertical de um outro elemento bloco

elas não se somam como seria esperado, mas apenas a maior prevalece. Assim você pode pegar, para fazer um teste

e colocar diversos paragrafos um após o outro, e você percebe, que as margens entre os paragrafos são iguais

as margens das bordas.

Um exemplo curioso é que se você colocar uma div vazia entre dois paragrafos e setar na div "margin-top: 200px;

margin-bottom: 190px"; e supondo que os paragrafos tenham margem de 15px, o esperado seria que a margem entre

os paragrafos seria de 390px, mas permanece 200px, isso porque, se a div não tem conteudo, sua altura é zero,

então as suas margens entram em contato, ficando assim as quatro margens em contato, sendo a maior 200px, a margem

que prevalece é essa. Vocês podem até colocar diversas divs vazias entre os dois parágrafos e testar o

comportamento; prevalece sempre a maior.

No caso de margens negativas você pega a maior margem positiva e subtrai dela o valor da maior margem negativa. O

resultado é o valor da margem que prevalece. Se não há margens positivas, subtrai-se a maior margem negativa de

zero.

Um outro exemplo curioso é colocar uma div vazia entre a borda do topo da página e um outro elemento

bloco, vocês podem perceber que entram em colapso entre si as margens de um mesmo elemento(desde que tenha altura

zero, onde as duas entram contato).

O que aconteceu no meu caso, foi que em elementos blocos aninhados, as margens também entram em colapso se elas

entram em contato.

A margem da div externa era zero, e a margem da div interna era 5px então a maior é a da div interna. Agora, porque

ela não ficou do lado de dentro da div externa mas do lado de fora? A explicação é que as margens se formam o

mais longe possível no "box model".

Achei estranho também que o Google Chrome não tenha mostrado esse comportamento na imagem que o Thiago Retondar mostrou.

mas deu a impressão que o elemento '.conteudo' ainda estava com a margem, sendo que ela REALMENTE se formou na

div '.coluna' que era a mais externa.

Assim, vocês poderiam fazer o teste, colocar a div externa com margem 5px e a interna com 20. o resultado final é que

div interna fica com zero e a externa com vinte porque elas entraram em contato e consequentemente colapso.

Assim vocês podem aninhar quantos elementos blocos que quiserem. Suas margens formarão sempre no elemento mais externo

com o valor mais alto. Claro, entre todas as margens que entrem em contato. Esse comportamento prevalece também no

ie6

vocês podem ver nesse exemplo abaixo:

<html>

    <head>
        <title>margin collapse</title>
        <style type="text/css">

        #azul {
            margin: 5px 0;
            background: blue;
        }

        #vermelha {
            /*border: 1px solid black;*//* descomentem aqui e vejam o resultado */
            margin: 20px 0;
            background: red;
        }

        #vermelha {
            margin: 25px 0;
            background: red;
        }

        #cinza {
            margin: 30px 0;
            background: gray;
        }

        p {
            background: gold;
            margin: 0;
        }
        </style>

    </head>

    <body>
        <div id="azul"><div id="vermelha"><div id="verde"><div id="cinza">a</div></div></div></div>
        <p>outro elemento(mas sem margem)</p>
    </body>

</html>

Vejam que o comportamento ficou parecido com a herança.

E como prevenir isso? :)

Simples! Basta evitar que as margens entrem em contato! Isso se faz com um padding, uma borda ou qualquer coisa que possa ficar entre as duas margens.

(Estão vendo que antes de encontrar a solução precisamos entender o problema? Aí fica muito mais fácil. Tentar encontrar a solução de um problema que não se entende é como tatear no escuro)

Há também a possibilidade de transformar os elementos em outros tipos (display) já que o comportamento é só para elementos blocos. Se escolher table lembre-se do ie6 que não suporta display table. então não vai adiantar nada. É claro que quase nunca o ie6 vai renderizar corretamente margin-collapse, e quase nunca se terá que preocupar com ele. Exceto

se o que se quiser, for o contrario, que realmente haja margin-collapse.

No ie6 apenas setar largura na div mais externa previne o colapso em elementos aninhados. Deve ser um bug.

E o overflow, preveniu o colapso no ff porque? Não sei. De uma forma ou de outra, overflow está separando

as margens, de outra forma entrariam em colapso. E porque não funcionou no ie6. O ie6 nunca tratou overflow

corretamente. Até aqui no fórum há tópicos abertos por causa de problema de overflow no ie6. então...

E se eu não quiser uma borda ou um padding, o que devo fazer? ~~ aí me pegou. Cadê aquela propriedade chamada

margin-collapse? Funciona? Alguém sabe algo sobre ela? Testei aqui e não funcionou. :(

Será que ainda com essa pendencia já faz sentido esse [Resolvido] aí no tópico?

Bom aí vão os 2 links que li:

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Espero que lhes seja útil

^_^

Thiago Retondar · Março 17, 2010

Cara, não entendi nada do que você disse... =/

Dá uma olhada aqui http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php

Eu não estou é entendo o seu problema... Tem uma imagem do resultado final que deseja?

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Jair Humberto · Março 17, 2010

Cara, não entendi nada do que você disse... =/

kkkk, eu sou tão ruim pra escrever assim? ^^

O problema que eu estava tendo era margin collapse com elementos aninhados.

Segundo os artigos que li, muitos desenvolvedores têm problemas com isso. :)

Desnickadu · Março 17, 2010

seguindo a linha de que são bilhões de site e milhões de desenvolvedores [-sobrinhos] pode ser bastante gente, mas não necessariamente algo comum :P

gostei bastante do que escreveu, realmente exclareceu o problema ^^

eu ainda não consegui "encontrar" uma situação que isso ocorra, mas quando ocorrer agora ja sei como resolver :P

vlw Jair o/

Jair Humberto · Março 18, 2010

Desnickadu, eu não sou "sobrinho" e tive este problema. :)

E esse problema é comum sim, pra quem usa margens.

Você não deve ter tido ainda porque usa bordas apenas.

Qualquer pessoa que usa regularmente margens, vai se deparar

sempre com esse problema oras. :P

Arquivado

elemento pai herdando margem

Recommended Posts

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Desnickadu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bergs 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bergs 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Desnickadu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Desnickadu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Desnickadu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jair Humberto 2