Как установить css margin для моего ng-содержимого всех дочерних html-элементов?

Question

Мне нужно поле сверху, снизу, слева, справа от всех моих компонентов HTML внутри ng-content. Как написать для этого css?Я пытался, но не работал. Пожалуйста, помогите мне решить эту проблему.

app.component.html:

 <div class="wrapper"><ng-content></ng-content></div>  

app.component.css:

  .wrapper{
  position:fixed;
  background-color:#ccc;
  height:60px;
  padding:10px;
  bottom:0;
  left:0;
  width:100%; 
  }
 .wrapper:: ng-deep <ng-content>{
  margin:5px 8px 4px 2px;
  padding:0;
  text-align:center;

  }

Answer 1

app.component.html

 <div class="wrapper">

 <button class="left">Left</button> 
 <button class="right">Right</button>

</div>  

app.component.css

.left{
  float:left;
}

.right{
  float:right;
}


.center{
   text-align: center; 
}


 .wrapper{
  margin:15px 8px 4px 2px;
  padding:0;
  text-align:center;
  width:100%; 
  height:60px;

}

Вы можете добавить свой HTML-контент внутри <div class="wrapper"></div>.
Я надеюсь, что вы нашли этополезно !!

РЕДАКТИРОВАТЬ
Изменить класс на оболочку.

Answer 2

Вы можете попробовать это:

div.wrapper _ngcontent-c0 {
margin:5px 8px 4px 2px;
padding:0;
text-align:center;
}

Здесь _ngcontent-c0's 0 - это числовое автоматическое увеличение на Angular.Если вы используете ng-content в своем компоненте приложения, вы получите его как _ngcontent-c0, а дочерние элементы этого ng-content будут _ngcontent-c1