Div text vertical padding

Question

I've noticed that as fonts get larger and larger, the vertical padding in a div element above and below the text grows larger. Is there anyway quick way to prevent this? Is this font dependent?

I'm attempting to create a word cloud, but these vertical spacings are proving to be quite annoying.

Here is an example:

Answer 1

您可以使用line-height样式规则来更改文本周围的空间量

Answer 2

尝试在您的CSS中：

line-height: 20px;

Answer 3

Setting the line-height is your answer but I would recommend the em unit and setting the line-height to 1em for all font sizes in your tag cloud. I always use em's to represent line-height because regardless of whether the font is set by pixels, ems, or some other unit, line-height is always relative to the size of the font.

According the the W3C specification for line-height

A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.

This means the font size can vary but the vertical height of the fonts will always remain consistent and relative to the corresponding size.

Answer 4

You could research for some already done word clouds.

Or just put classes to the different sizes, and so you can put negative padding to the bigger sized words.

.span bigger {
    font-size:2 em;
    padding: -4px;
}
.span big {
    font-size:1.5 em;
    padding: -2px;
}
.span small {
    font-size:0.9 em;
    padding: 0;
}

Hope it helped or at least gave you some cool ideas! ;)