我不明白为什么我的保证金未在此示例中应用。似乎海峡前进不够。
应用程序模板:
<my-component class="my-class">Test</my-component>
<div>Some Conent</div>
应用样式:
.my-class { margin-bottom: 30px; }
div { background-color: red; }
组件模板:
<div><ng-content></ng-content></div>
div获得红色背景,但两者之间没有差距;
答案 0 :(得分:2)
因为角度分量选择器不是真实的&#34; html元素,因此它们没有默认样式。因此,浏览器不知道如何显示它们,并且不应用任何对组件周围的css布局产生影响的样式(例如margin
或height
)。
要解决此问题,您需要将除display
之外的任何值的css none
属性应用于您的组件。
例如:
.my-class {
display: block;
margin-bottom: 30px;
}