CSS box model issue

[Cullen411]

Below is a snippet of code that I got from a site. For me it looks wrong as I think the bottom padding of 20px has been left out.
This line:
height:33px; /* 14px + 17px + 2px = 33px */
Should it not be:
height:53px; /* 14px + 17px + 20px + 2px = 53px */

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See

http://glish.com/css/hacks.asp

for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}

 

[BabyJeffy]

Hmmm... you think it shold read:

height:53px; /* 14px + 17px + [b]20px[/b] + 2px = 53px */

But where does that extra 20px come from? The comment in the code fragment says:

   [correct height] (14px)
 + [top padding] (17px)
 + [top and bottom border widths] (2px)

So we get left with 14px + 17px + 2px = 33px as they have.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[Vragabond]

I think you're misreading the padding line. The values start at padding-top then work their way clockwise. So

  padding: 17px  0px    0px    20px; 
  padding: top  right  bottom  left;

So, your bottom padding is 0px not 20px. I do believe that's where the confusion lay.

 

[BabyJeffy]

Yeah... like Vragabond says

I remember the order by thinking about the (analog) clock face... building on Vragabond's example:

12 o'clock = top
3 o'clock = right
6 o'clock = bottom
9 o'clock = left

The analogy requires that the "little hand" points to the top, the left, bottom and the right in that order.

Thanks to BRPS for sharing that one a long time ago.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[Cullen411]

Oops sorry my mistake, I misread it.
Though one thing that has cropped up is the margin:50px 0px 10px 0px;
Shouldn't the margin be added and in that case making
height:93px; /* 14px + 50px + 10px + 17px + 2px = 93px */

 

[Vragabond]

Now you're just making it up!

No, margins don't play along. IE's box model problem was because it included everything in the bounding box (bound by borders that is) rather than just the content part in the width. Margins, being on the outside of borders, were not part of the M$ blunder with the box model.

 

[Cullen411]

ah cheers must go and check out where I got that mistaken idea from.

 

[tsdragon]

The way I remember top-right-bottom-left is with the mnemonic: trouble - TRouBLe. I also use something similar to BabyJeffy's solution: start at the top and go clockwise.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.