如何为我的ng-content所有子html元素设置CSS边距？

Question

我需要在ng-content内所有HTML组件的上，下，左，右页边空白。如何为此编写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

您可以尝试以下方法：

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

此处_ngcontent-c0的数字为0，由Angular自动递增。如果您在App组件中使用此ng-content，那么您将获得此_ngcontent-c0，并且此ng-content的子元素将为_ngcontent-c1

Answer 2

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;

}

您可以在<div class="wrapper"></div>内添加HTML内容。
我希望你觉得这有用！

编辑
将类更改为包装器。