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.
精彩评论