Почему ссылка шире картинки?

Question

[Филипп Гаврилов]

Имеется код:

<div class="wrapper">
	<a href="https://toster.ru/"><figure class="logo"></figure></a>
</div>

.wrapper {
width: 100%;
}

figure.logo {
	margin: 0 auto;
	height: 60px;
	width: 300px;
	background-image: url(/assets/img/logo.png);
	margin-bottom: 10px;
}

То есть, имеется страница, на ней по середине выровнена картинка, обернутая ссылкой.
Поле ссылки оказывается не в размер картинки, а на всю страницу в ширину и в 60px в высоту.
Почему так?

Answer 1

[nikfakel]

Потому что figure - блочный элемент. Тег A оборачивает его целиком, то есть и поля, которые margin: auto, из-за чего растягивается на всю ширину. Можно сделать так:

.wrapper {
text-align: center;
}
figure.logo {
display: inline-block;
}

либо:

.wrapper a {display: block; 
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
  height: 60px;
}
.logo {
  background-image: url(/assets/img/logo.png);
  height: 60px;
  width: 100%;
}

Height сами смотрите куда нужно вставить, в зависимости от того, что у вас в figure.