Why does changing font-size and line-height screw up my HTML layout?

I could post the code if it would be helpfu开发者_JAVA技巧l (but it's a lot). Basically, if I change line-height or font-size to a really big value, it breaks my html layout - specifically, my DIVs seem to be getting bigger...But I don't have text in those divs.

Any inline element will pay attention to line-height:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

In your case, you have <img> elements (which are inline elements by default) inside your <div> elements (which are block containers).

Changing the font-size implicitly alters the pixel value of line-height, the default is line-height: normal and that means:

Tells user agents to set the used value to a "reasonable" value based on the font of the element.

So, altering either the font-size or line-height will change the vertical space that your inline elements occupy.