The
line-height that is that many people overlook most people would know
that we should not set the line-height, using an absolute or px because
of its size, will not change the font-size so we. should be turned to
the relative em units instead, but some people may not know that this
method is not the best way.
Do not set the line-height with the Absolute.
So as not to waste time. We see examples do better. Let us do a simple archive of articles html code will look something like this.
|
|
<article class = "column1">
<h2> Px </ h2>
<p> Chupa chups biscuit cheesecake. Applicake cake jujubes drag? E chocolate cake. Gummi bears sweet roll tootsie roll candy canes. </ P>.
</ Article>
<article class = "column2">
<h2> Em </ h2>
<p> Chupa chups biscuit cheesecake. Applicake cake jujubes drag? E chocolate cake. Gummi bears sweet roll tootsie roll candy canes. </ P>.
</ Article>
|
Next, we put the css code below into it. Then try the Reviews
|
|
article {
font-size: 1em; / * 16px * /
}
article.column1 {
line-height: 24px; / * 24px * /
}
article.column2 {
line-height: 1.5em; / * 16x1.5 = 24px * /.
}
|
Css code, we set the line-height. .column1 with the px .column2 , we will use em when I try to get results of this review.
We see that both methods.
The same results were okay This is because the value of 1.5em 24px
enough, but what happens if one day we must come to the work by changing
the font-size from 1em 2em.
|
|
article {
font-size: 2em; / * 16x2 = 32px * /.
}
article.column1 {
line-height: 24px; / * 24px * /
}
article.column2 {
line-height: 1.5em; / * 32x1.5 = 48px * /.
}
|
When I preview again. We will not pass this resultant.
We will find it .column1 using the unit px is a part. .column2
used em's remains display beautifully intact because the line-height is
set with px, then its size is fixed is to be 24px and not adjustable.
font-size changes according to the line-height that is determined by its
size is a multiple of em font-size itself, which in this case it is 1.5
times or 2em 48px enough.
Inheritance Em's problems
Now let's look at another example. Let us create a new page and insert the html code below to.
|
|
<article class = "column1">
<h2> Em </ h2>
<p> Chupa chups biscuit cheesecake. Applicake cake jujubes drag? E chocolate cake. Gummi bears sweet roll tootsie roll candy canes. </ P>.
</ Article>
<article class = "column2">
<h2> Unitless </ h2>
<p> Chupa chups biscuit cheesecake. Applicake cake jujubes drag? E chocolate cake. Gummi bears sweet roll tootsie roll candy canes. </ P>.
</ Article>
|
Then we put this css code into.
|
|
article {
font-size: 1em; / * 16px * /
}
article.column1 {
line-height: 1.5em; / * 16x1.5 = 24px * /.
}
article.column2 {
line-height: 1.5; / * 16x1.5 = 24px * /.
}
|
Css code above, we will compare the difference between the set line-height is not put em on the unit at all. Look how it's different, right? Let us take a review
The result is a With the same two columns Let us try to add css rule to another, we would add. font-size: 2em into the " article p "css code will become like this.
1
2
3
4
5
6
7
8
9
10
11
12
|
article {
font-size: 1em; / * 16px * /
}
article p {
font-size: 2em; / * 16x2 = 32px * /.
}
article.column1 {
line-height: 1.5em; / * 16x1.5 = 24px * /.
}
article.column2 {
line-height: 1.5; / * 16x1.5 = 24px * /.
}
|
Before trying the Reviews Let us try to make the knowledge em's then imagine that the results would look like. When I try to answer the review yet.
We will find it .column1 used em is the problem. .column2 not wearing what unit Back rendered beautifully intact. Why is this?
Set line-height without the unit.
This is because determining the line-height with em, it will lead to. "Descendant (offspring)" That's it! It's bad huh? It will not solve Then have the children with me?
It sounds good
But the problem is that the inheritance of the children, it was not to
1.5em but it is 16 × 1.5 = 24px separately for this reason. Although we are going to assign to article p has a 2em font-size and line-height, but it will still have the same size to 24px.
This problem was solved by determining the line-height form, do not enter any units.
It allows the children to get to the "multiplier" or in this case 1.5
that just dealing with typography in the line-height, it is not
difficult anymore.
No comments:
Post a Comment