如何为我的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

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内容。希望您觉得这有用！

编辑将类更改为包装器。

Answer 2

ng-content的元素可从父组件访问。即，如果您在app-component.html中编写]

<content>
     <button class="left">Left</button> 
     <button class="right">Right</button> 
 </content>
并且您在子组件中使用ng-content，即

<div class="wrapper">
  <ng-content></ng-content>
</div>
然后您可以从app.component.css即访问所有它们。

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