开发者

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

开发者 https://www.devze.com 2023-02-11 14:06 出处:网络
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 s

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消