Re: [css-d] RES: RES: child margin affecting parent?

[Philippe Wittenbergh]

Le 13 mai 2013 à 11:08, COM  a écrit :

> On May 12, 2013, at 7:04 PM, Alan Gresley  wrote:
> 
>> No, you simply have collapsing margins. Just change the value of the top 
>> margin to zero. Like so.
>> 
>> header{
>>  margin:0 0 1em 0;
>>  border:red 1px solid;
>> }
> 
> Thank you. Couple questions…I did have a border on the header..isnt that 
> supposed to prevent the collapsing margins scenario?

That border will prevent collapsing-through of top/bottom margins of child 
elements of your , not the margins on the  itself.
> 
> Also,  need to have a top margin value for the header so that I can position 
> it vertically where I need it to, so am I forced to use padding for this?

Assuming the  is the first child of , you could set some 
padding-top on the body element.

> ..off to read the link you provided

Good. And then create simple test cases to play with. Add a bit of background 
colours to the elements in your test cases to see what goes where. If you don't 
understand what happens in one (as minimal as possible) test case, post it 
somewhere and ask questions to the list.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] RES: RES: child margin affecting parent?

[COM]

On May 12, 2013, at 7:04 PM, Alan Gresley  wrote:

> No, you simply have collapsing margins. Just change the value of the top 
> margin to zero. Like so.
> 
> header{
>   margin:0 0 1em 0;
>   border:red 1px solid;
> }

Thank you. Couple questions…I did have a border on the header..isnt that 
supposed to prevent the collapsing margins scenario?

Also,  need to have a top margin value for the header so that I can position it 
vertically where I need it to, so am I forced to use padding for this?

thank you..off to read the link you provided

J
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] RES: RES: child margin affecting parent?

[Alan Gresley]

On 13/05/2013 7:47 AM, COM wrote:

sorry for seeming dumb but why would adding padding prove its
collapsing margin?


Since padding on the parent prevents a child's margin to collapse 
through. the same applies if you had a border on the parent.



wrapper contains header in this case, plus, I have other child
objects whose top margin value will not do this.


Be interested to know all the properties and values.


is there some special property to the  tag? I realize that's
HTML…


No, you simply have collapsing margins. Just change the value of the top 
margin to zero. Like so.


header{
margin:0 0 1em 0;
border:red 1px solid;
}


This test case should shed some light on collapsing margins.

http://css-class.com/test/css/box/margins/collapsing-margins.htm


--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] RES: RES: child margin affecting parent?

[David Hucklesby]

On 5/12/13 2:47 PM, COM wrote:

sorry for seeming dumb but why would adding padding prove its collapsing
margin?

wrapper contains header in this case, plus, I have other child objects whose
top margin value will not do this.

is there some special property to the  tag? I realize that's HTML…


On May 12, 2013, at 2:31 PM, "Mauricio Silva"  wrote:


Set top padding: 1px 20px; for #wrapper and margin uncollapse proofing that
this is a collapsing margin issue.


[...]

As this explanation says, it's a difficult concept to grasp. Hopefully the
examples given will help -

 

--
Cordially,
David

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] RES: RES: child margin affecting parent?

[COM]

sorry for seeming dumb but why would adding padding prove its collapsing margin?

wrapper contains header in this case, plus, I have other child objects whose 
top margin value will not do this.

is there some special property to the  tag? I realize that's HTML…





On May 12, 2013, at 2:31 PM, "Mauricio Silva"  wrote:

> Set top padding: 1px 20px; for #wrapper and margin uncollapse proofing that
> this is a collapsing margin issue.
> 
> Maurício Samy Silva
> http://maujor.com
> http://facebook.com/maujor
> @maujor
> 
> 
> -Mensagem original-
> De: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] Em nome de COM
> Enviada em: domingo, 12 de maio de 2013 18:27
> Para: CSS-Discuss
> Assunto: Re: [css-d] RES: child margin affecting parent?
> 
> I am not sure that this is collapsing margins..perhaps I don't get "margin
> collapse" but I thought it meant if 2 block level items touching vertically,
> the larger margin value will be expressed, the smaller will "disappear."
> 
> what I'm seeing here as the problem is child element margin top value is
> pushing its parent downward.
> 
> and I don't get why?  Is the parent the "boss" of the child?
> 
> 
> Thank yoU!
> 
> John
> 
> 
> On May 12, 2013, at 2:17 PM, "Mauricio Silva"  wrote:
> 
>> Hi J,
>> 
>> THis happens due the classic "CSS Collapsing Margins" behavior Have a 
>> look at: http://css-discuss.incutio.com/wiki/Collapsing_Margin
>> for a compreensive explanation.
>> Regards
>> 
>> Maurício Samy Silva
>> http://maujor.com
>> http://facebook.com/maujor
>> @maujor
>> 
>> 
>> -Mensagem original-
>> De: css-d-boun...@lists.css-discuss.org
>> [mailto:css-d-boun...@lists.css-discuss.org] Em nome de COM Enviada 
>> em: domingo, 12 de maio de 2013 17:50
>> Para: CSS-Discuss
>> Assunto: [css-d] child margin affecting parent?
>> 
>> Given the css below, why should the header margin value also push the 
>> wrapper downward? In my markup, the wrapper div is the parent, 
>> margin:0, auto;
>> 
>> thank you
>> 
>> J
>> 
>> *{
>> padding:0;
>> margin:0;
>> }
>> body{
>>  background-color:rgb(200,200,200);
>>  font-family:helvetic-neue, Verdana, Arial, sans-serif;
>>  font-size:100%;
>> }
>> #wrapper{
>>  margin:0 auto;
>>  width:940px;
>>  padding:0 20px;
>>  background-color:rgb(220,230,220);
>> }
>> header{
>>  margin:20px 0 1em 0;
>>  border:red 1px solid;
>> }
>> __
>> css-discuss [css-d@lists.css-discuss.org] 
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- 
>> http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] RES: child margin affecting parent?

[COM]

I am not sure that this is collapsing margins..perhaps I don't get "margin 
collapse" but I thought it meant if 2 block level items touching vertically, 
the larger margin value will be expressed, the smaller will "disappear."

what I'm seeing here as the problem is child element margin top value is 
pushing its parent downward.

and I don't get why?  Is the parent the "boss" of the child?


Thank yoU!

John


On May 12, 2013, at 2:17 PM, "Mauricio Silva"  wrote:

> Hi J,
> 
> THis happens due the classic "CSS Collapsing Margins" behavior
> Have a look at: http://css-discuss.incutio.com/wiki/Collapsing_Margin
> for a compreensive explanation.
> Regards
> 
> Maurício Samy Silva
> http://maujor.com
> http://facebook.com/maujor
> @maujor
> 
> 
> -Mensagem original-
> De: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] Em nome de COM
> Enviada em: domingo, 12 de maio de 2013 17:50
> Para: CSS-Discuss
> Assunto: [css-d] child margin affecting parent?
> 
> Given the css below, why should the header margin value also push the
> wrapper downward? In my markup, the wrapper div is the parent, margin:0,
> auto;
> 
> thank you
> 
> J
> 
> *{
> padding:0;
> margin:0;
> }
> body{
>   background-color:rgb(200,200,200);
>   font-family:helvetic-neue, Verdana, Arial, sans-serif;
>   font-size:100%;
> }
> #wrapper{
>   margin:0 auto;
>   width:940px;
>   padding:0 20px;
>   background-color:rgb(220,230,220);
> }
> header{
>   margin:20px 0 1em 0;
>   border:red 1px solid;
> }
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] RES: child margin affecting parent?

[Mauricio Silva]

Hi J,

THis happens due the classic "CSS Collapsing Margins" behavior
Have a look at: http://css-discuss.incutio.com/wiki/Collapsing_Margin
for a compreensive explanation.
Regards

Maurício Samy Silva
http://maujor.com
http://facebook.com/maujor
@maujor


-Mensagem original-
De: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] Em nome de COM
Enviada em: domingo, 12 de maio de 2013 17:50
Para: CSS-Discuss
Assunto: [css-d] child margin affecting parent?

Given the css below, why should the header margin value also push the
wrapper downward? In my markup, the wrapper div is the parent, margin:0,
auto;

thank you

J

*{
padding:0;
margin:0;
}
body{
background-color:rgb(200,200,200);
font-family:helvetic-neue, Verdana, Arial, sans-serif;
font-size:100%;
}
#wrapper{
margin:0 auto;
width:940px;
padding:0 20px;
background-color:rgb(220,230,220);
}
header{
margin:20px 0 1em 0;
border:red 1px solid;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] child margin affecting parent?

[COM]

Given the css below, why should the header margin value also push the wrapper 
downward? In my markup, the wrapper div is the parent, margin:0, auto;

thank you

J

*{
padding:0;
margin:0;
}
body{
background-color:rgb(200,200,200);
font-family:helvetic-neue, Verdana, Arial, sans-serif;
font-size:100%;
}
#wrapper{
margin:0 auto;
width:940px;
padding:0 20px;
background-color:rgb(220,230,220);
}
header{
margin:20px 0 1em 0;
border:red 1px solid;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/