Why is margin-right not being applied?

Question

css

why is there no padding between user_photo and 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;
}

But if you set margin-left to the user_text element, then it will work.
And why if instead of construction

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

simple to use (and tweak less accordingly)

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

then the picture is deformed

Answer 1

What is the style of user_text?