why not using padding as display as they show?

Viewed 27

I am newbie with html css and here is my problem.

I want to code a page as this page https://www.w3schools.com/w3css/tryw3css_templates_band.htm#band I want to see the button's information, and here is what I got button's information

As you can see in this picture, I see the button contact's padding is 12px 24px. But when I code this button, when I set the padding like this

#nav li a {
text-decoration: none;
line-height: 46px;
padding:  12px 24px;
}

The button became like this picture button when set padding become 12px 24px

They said to me that I must set the padding like this

#nav li a {
text-decoration: none;
line-height: 46px;
padding:  0px 24px;
}

And here is what I got

button when set padding become 0px 24px

Maybe it is ok when set padding 0px 24px.

I am very confusing because why I must set padding different with the padding it show in the page ?

Could you please explain this problem for me ? Thank you very much for your time.

0 Answers
Related