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

Учусь верстке и запнулся на одном месте. Делаю кнопку, не получается выровнять текст внутри нее, погуглив, понял что padding будет работать если у родителя есть border. Вроде у меня все условия учтены, а отступы от верха так и не работают. Прошу показать как правильно и указать на то, что я делаю не так.
Вот собственно сама кнопка
  • Вопрос задан
  • 9508 просмотров
Решения вопроса 4
pLavrenov
@pLavrenov
Разработка сайтов
@infinityC
padding-top не работает для inline элементов, таких как span
Вам нужно для span указать правило display:block
Ответ написан
Вот как можно выровнять текст без дополнительного элемента: jsfiddle.net/mCCmv/3
Ответ написан
mannaro
@mannaro
Умею профессионально гуглить
добавьте display: block ссылке.
И почитайте про block / inline элементы :)

ух, пока отвечал уже 2 человека написали
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
shiza36
@shiza36
"padding будет работать если у родителя есть border" - это не так.
Ответ написан
Комментировать
@Novol
Веб-разработчик
В данном случае лучше использовать 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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы