Thread: How did u know?
View Single Post
  #2 (permalink)  
Old June 29th, 2006, 09:45 PM
richard.york's Avatar
richard.york richard.york is offline
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

Good question... had to actually give it some thought. :)

Ok, you've got the[list] element, it has a 25px height, the <li> element has a 23px height, 2px of border, and is offset from the top 1 pixel, for a total of 26px, 1px of the <li> element will overlap with the bottom border of the[list] element. I assume you already understood that, but /I/ had to think it through again. :-).

When you take away the height, you have a situation where the <li> element will expand and contract vertically to accomodate the content inside of it, this is known as shrink-to-fit sizing. So basically, the height changes, it is now calculated using line-height, and the font-size of it's contents, aka the inline box model. The font-size is set to 14 pixels, and the default line height appears to be 16 pixels, I found this out by adding the line-height property to the <span> element, and adjusting the length until it matched the output when there was no line-height applied. So, take that 16px, 4px of top padding from the <span> element, 2px of border, and 4px offset from the top, and you get 26px, the same number that you had with the explicit height set.

Honestly, I don't usually put that much thought into laying something out when I'm actually putting a stylesheet together. I just experiment with the lengths until it looks right, test in various browsers, rinse and repeat. But that's what's happening. An explicit height is better here, IMO, that default line height could vary from browser to browser.

Very good question! In all honesty, that hadn't even crossed my mind when I added that little blurb, I just yanked the height out, and adjusted the top offset till I had it lined up again.



Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results
Reply With Quote