Откуда берется отступ между элементами?

Question

делаю вот такой блок и в процессе создания появился вопрос, откуда берется отступ между цитатой и верхними элементами?

*{
  padding: 0px;
  margin: 0px;
}

.ceo-card{
  display: flex;
  max-width: 160px;
  height: 160px;
  border: 1px solid black;
  border-radius: 16px;
  flex-wrap: wrap;
  padding: 6px;
  align-items: center;
}

.ceo-card__avatar-pic{
  width: 32px;
}

.ceo-card__full-name{
  margin-left: 5%;
  padding: 2px;
}

.ceo-card__name{
  font-size: 10px;
  font-weight: 600;
}

.ceo-card__surname {
  font-size: 5px;
  opacity: 50%;
  font-weight: 600;
}

.quote{
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
}

<div class="ceo-card">
    <div class="ceo-card__avatar">
      <img class="ceo-card__avatar-pic" src="https://cdn-icons-png.flaticon.com/512/147/147140.png">
    </div>
    <div class="ceo-card__full-name">
      <p class="ceo-card__name">Bill Adams</p>
      <p class="ceo-card__surname">Ceo UpTech</p>
    </div>
    <p class="quote">
      “ This team is really the <br> best in its field,I don't <br> regret working with them, <br> and will come back again<br> thanks “
    </p>
</div>

Answer 1

В вашем случае FLEX растягивает контентные области пропорционально контенту, попробуйте убрать у .ceo-card высоту height и увидите, что отступы пропадут

Если Вам нужно поджать блоки кверху, то история примерно такая

у .ceo-card убираете flex-wrap и align-items, добавляете flex-direction: column, высоту оставляете как есть

блоки ceo-card__avatar и ceo-card__full-name оборачиваете в еще один блок, которому прописываете display: flex

а дальше в самих блоках играетесь с padding-ами, если нужно

и рекомендую у .ceo-card добавить overflow: hidden на случай длинных текстов в цитатах

БЛОГ НА HUSL

Откуда берется отступ между элементами?

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