Почему не применяется margin-right?

Question

finren @finren

Почему не применяется margin-right?

почему между user__photo и user__text нет отступа

<div class="user">
          <div class="user__photo">
            <img src="https://placehold.it/57/333" alt=""> 
          </div>

          <div class="user__text">
            <div class="user__name" >Lewis<br>Nathaniel</div>
            <div class="user__prof">UI &amp; UX Designer</div>
          </div>

        </div>
        ....

//main: ../style.less

.user {
  display: flex;
}

.user__photo {

  width: 57px;
  height: 57px;

  img {
    border-radius: 50%;
  }

  padding-right: 9px;
}


.user__name {
  font-size: 1.066rem;
  color: @black;
  font-weight: 700;
  line-height: 1rem;
}

.user__prof {
  font-size: 0.8rem;
  font-weight: 400;
  color: fade(@black, 70%);
  line-height: 12px;
}

Но если задать margin-left элементу user__text то работать будет.
И почему если вместо конструкции

<div class="user__photo">
            <img src="https://placehold.it/57/333" alt=""> 
<!--            ??????               -->
          </div>

использовать просто (и подправить less соответственно)

<img class="user__photo" src="https://placehold.it/57/333" alt="">

то картинка деформируется

Вопрос задан более трёх лет назад
71 просмотр

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

2 комментария

finren @finren Автор вопроса

margin-top: 4px;

Написано более трёх лет назад

Алексей @le2xx

finren, Попробуйте вытащить этот стиль наружу

img {
    border-radius: 50%;
  }

Вообще было бы хорошо если бы вы показали готовый CSS а не LESS. Я собрал CSS и там есть отступ

<div class="user">
  <div class="user__photo">
    <img src="https://placehold.it/57/333" alt=""> 
  </div>

  <div class="user__text">
    <div class="user__name" >Lewis<br>Nathaniel</div>
    <div class="user__prof">UI &amp; UX Designer</div>
  </div>
</div>
<style>
.user {
  display: flex;
}

.user__photo {
  width: 57px;
  height: 57px;
  padding-right: 9px;
}

img {
  border-radius: 50%;
}

.user__name {
  font-size: 1.066rem;
  color: #000;
  font-weight: 700;
  line-height: 1rem;
}

.user__prof {
  font-size: 0.8rem;
  font-weight: 400;
  color: fade(#000, 70%);
  line-height: 12px;
}
</style>

Написано более трёх лет назад

Ваш ответ на вопрос