Как поправить кнопку в html/css файле?

Question

Как сделать так, чтобы рисунок внутри кнопки не выходил за пределы самой кнопки? Если вы вставите этот код, то увидите, что звездочка находится за пределами кнопки. Как сделать так, чтобы звёздочка была всегда внутри кнопки независимо от того, какой размер мы задаем звёздочке и кнопке?

html:

<p>
      <button class="button"><p class="symbol">☆</p></button>
</p>

css:

.button {
  background-color: rgb(168, 194, 233);
  border-radius: 20px;
  outline: none;
  height: 60px;
}
.symbol {
  margin-bottom: 300px;
  font-size: 400%;
}

Answer 1

Чтобы достичь желаемого результата:

Не ограничивайте высоту кнопки - пусть её растягивает звёздочка (текст);
Уберите у параграфов отступы по умолчанию, задав margin: 0;
Установите line-height равной размеру шрифта.

.button {
  border-radius: 20px;
  outline: none;
  background-color: rgb(168, 194, 233);
}

.symbol {
  margin: 0;
  font-size: 972%;
  line-height: 1em;
}

<p>
  <button class="button"><p class="symbol">☆</p></button>
</p>

БЛОГ НА HUSL

Как поправить кнопку в html/css файле?

Ответы (1 шт):