Угловая делает ненужное пространство

Question

У меня есть компонент members, в котором есть все компоненты, состоящие из одного элемента.

Если я использую компонент members, как показано ниже, проблема не возникает

<div class="row bg-light justify-content-center py-4">
  <div class="col-lg-8">
    <h3 class="font-weight-light pb-2">Members</h3>
    <div class="row">
<!-- Repeating div -->
      <div class="col-12 col-md-4 col-lg-3 p-2"> 
        <div class="card px-0 ">
          <img class="card-img-top" src="https://i1.sndcdn.com/avatars-000495007683-zg65ko-t500x500.jpg" alt="Card image cap">
          <div class="card-body p-2 text-center">
            <h5 class="card-title mb-1">Name Surname</h5>
            <p class="card-text mb-1">Title</p>
            <a href="#"><span class="ion ion-logo-linkedin text-dark mx-1 h3"></span></a>
            <a href="#"><span class="ion ion-logo-github text-dark mx-1 h3"></span></a>
            <a href="#"><span class="ion ion-logo-twitter text-dark mx-1 h3"></span></a>
          </div>
        </div>
      </div>
<!-- Repeating div -->
    </div>
  </div>
</div>

Но если я использую повторяющийся div в качестве компонента, возникает проблема

<div class="row bg-light justify-content-center py-4">
  <div class="col-lg-8">
    <h3 class="font-weight-light pb-2">Members</h3>
    <div class="row">

      <app-member></app-member>
      <app-member></app-member>
      <app-member></app-member>

    </div>
  </div>
</div>

Я не могу понять, почему это происходит

Answer 1

вы можете использовать:

<app-member style="display: contents;"></app-member>

, однако это поддерживается не во всех браузерах.

Вы также можете использовать:

<app-member class="col-12 col-md-4 col-lg-3 p-2"></app-member>

Конечно, вы должны удалитьэто классы внутри компонента

Answer 2

Существует дополнительный тег <app-member>, обертывающий ваш компонент, который не имеет требуемого стиля. Здесь тег <app-member> - это ваш селектор компонента, определенный в вашем компоненте.

Если присвоить соответствующий стиль тегу <app-member>, то проблема будет решена длясейчас, но я предложу вам стилизовать родительский элемент для <app-member> с соответствующим свойством Display, а затем использовать селектор css для стилизации <app-member> для этого конкретного экземпляра, чтобы стилизация не влияла на другие теги <app-member> в ваших приложениях.

Это действительно распространенная проблема разработчиков стилей компонентов. :-)

Дайте мне знать, я могу помочь вам с этим стилем при необходимости.