Line-height looks the same as position so then which do you use?

HTML & CSS
1

line-height:122px is equivalent to position: relative;bottom:-50px;, so then which do you use?

[position: relative;bottom:-50px;]

<div style="display:block; width: 256px; height: 200px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
 
<span style="display:block;font-family: New Times Roman; font-size: 20px;color: #0059dd;text-align: center; position: relative;bottom:-50px;"> [ ENJOY THE MUSIC ] 
</span></div>

[line-height:122px;]

<div style="display:block; width: 256px; height: 200px; cursor: pointer;background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
 
<span style="display:block;font-family: New Times Roman; font-size: 20px;color: #0059dd;text-align: center;line-height:122px;"> [ ENJOY THE MUSIC ] 
</span></div>
2

No it isn’t - they are completely different things.

While they may look the same for one example there are billions of other examples where they will look totally different.

You shouldn’t be using px for either of those dimensions in any case as they will break as soon as someone resizes or zooms the page.

2 Likes
3

What should I be using instead of px?

4

So, I should be using line-height:122px because it’s dealing with text?

5

So, you’re saying, all px’s should be changed no matter what they are associated with? What do I change px to then?

6

Anything font size related should be specified using em

Anything that is supposed to be related to the viewport size should be specified using %

The only thing that should be specified using 1px are minimum width borders.

7

I don’t see a visual difference between px and em when you zoom text?

8

Really?

1361Ă—462 23.8 KB

9

Really. How come when I zoom in I get only this?

10

You changed the code because that is what I see now, too. :slight_smile:

11

I changed em to px height and width. and only left em on font size.

12

Do you enjoy playing “bait and switch”? It’s not a constructive way to encourage people to help you.

1 Like
13

In the other post, felgall told me to, so that’s what I did.

14

@felgall did not tell you to use the same jsfiddle and pretend that the code had not changed in your next post.

In addition to a class in HTML/CSS 101, a basic course in conversational [language of choice] would be a huge benefit. The flow of conversation, the two-way transfer of information, would be a boon for you, IMO.

3 Likes
15

The jsfiddle always said: https://jsfiddle.net/d6wsgyu8/4/, oh I forgot to change the link in the top post. I apologize.

But the one associated with the image I provided always said: https://jsfiddle.net/d6wsgyu8/4/

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.