如何为我的 ng-content 所有子 html 元素设置 css 边距? [英] How to set css margin for my ng-content all child html elements?

问题描述

我需要 ng-content 中所有 html 组件的顶部、底部、左侧、右侧边距.如何为此编写 css?我试过了，但没有用.请帮我解决这个问题.

app.component.html:

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

app.component.css:

 .wrapper{位置:固定；背景色:#ccc;高度:60px；填充:10px；底部:0;左:0;宽度:100%；}.wrapper::ng-deep <ng-content>{边距:5px 8px 4px 2px;填充:0;文字对齐:居中；}

解决方案

app.component.html

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

app.component.css

.left{向左飘浮;}.对{浮动:右；}.中央{文本对齐:居中；}.包装{边距:15px 8px 4px 2px;填充:0;文字对齐:居中；宽度:100%；高度:60px；}

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

编辑
将类更改为包装器.

I need margin top,bottom,left,right of my all html components inside the ng-content.How to write the css for that? I tried but not working.Please help me to resolve this issue.

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;

  }

解决方案

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;

}

You can add your HTML content inside <div class="wrapper"></div>.
I hope you found this useful!!

EDIT
Change class to wrapper.

这篇关于如何为我的 ng-content 所有子 html 元素设置 css 边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！