开发者

Font-size increases the top margin

Why is it that if I do font-size:70px or 120px, the distance between the top and the text increases?

EDIT : Apparently, I fixed it by changing the line-height. Is there 开发者_如何学编程a default line-height?


As you haven't shown any code I will make the assumption that you're not using any styles beyond:

body
{
  font-size: 70px;
}

Every browser has a different default stylesheet, so the actual values may vary.

Typically the default line-height is 1em or 100% (same thing). On certain elements such as p and h#, there is a top and bottom margin by default. For p tags, the margin is 1em and for h# it varies widely (1.5em for h1, 1.25em for h2 etc).

em and % values are based off of the font-size. If you have a paragraph element with a font-size of 30px, by default it will have a 30px top and bottom margin.


html elements like p tag and h tags are having the default margin so i recommend always start writing any css with below code in your css file.

* {margin: 0; padding: 0;}

In above css line '*' defines all the elements in a page, so we are making all the elements default margin and padding to 0 and with this we don't need to give margin and padding to 0 each and everytime for p and h tags.


Headings have margin and padding in it as default. So, if the margin and padding is '0', then you won't be getting any space above or below the heading text.

h1 { margin:0; padding:0; }  

But you can always change the amount of margin and padding in the heading.
I hope this was helpful.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜