Почему не работает padding-top в моем примере?

Question

[Иван Малышев]

Учусь верстке и запнулся на одном месте. Делаю кнопку, не получается выровнять текст внутри нее, погуглив, понял что padding будет работать если у родителя есть border. Вроде у меня все условия учтены, а отступы от верха так и не работают. Прошу показать как правильно и указать на то, что я делаю не так.
Вот собственно сама кнопка

Answer 1

[pLavrenov]

добавь display:block
jsfiddle.net/n44SD

Comments

[Иван Малышев]

Спасибо!

Answer 2

[infinityC]

padding-top не работает для inline элементов, таких как span
Вам нужно для span указать правило display:block

Comments

[Иван Малышев]

Спасибо!

Answer 3

[Александр Вульф]

добавьте display: block ссылке.
И почитайте про block / inline элементы :)

ух, пока отвечал уже 2 человека написали

Comments

[Иван Малышев]

Спасибо!

Answer 4

[Илья Милошевич]

Вот как можно выровнять текст без дополнительного элемента: jsfiddle.net/mCCmv/3

Comments

[Иван Малышев]

Тоже хороший вариант. Спасибо!

Answer 5

[Krickt]

"padding будет работать если у родителя есть border" - это не так.

Answer 6

[Евгений Коелсник]

В данном случае лучше использовать line-height: 35px;
Я бы сделал так:

.btn-zak{
	width:240px;
	height:35px;
	border:1px solid gray;
	border-radius:5px;
  display:block;
  margin: 50px auto;
	background:linear-gradient(to top, #fff0f5, #ffc1c1);
	text-decoration:none;
	font-size:17px; 
	color:black;
  line-height:35px;
  text-align:center;
}
.btn-zak:hover{
	opacity: 0.5;
}

<a href="#" class="btn-zak">Текст кнопки</a>