css - 为什么 css margin-right 在 angular 8 上无效，清晰度 ui？

Question

右边距的 css 规则似乎在具有清晰度设计系统的 Angular 8 中无效。请参阅下面的详细信息。

我有一个带有清晰设计系统的 Angular 8 元素。我已经为它设置了标题和垂直导航，如下面的屏幕截图所示:

在内容区域我正在试验一些 css。
问题:下面规则的边距设置在右边好像没有生效。

styles.component.css:

.xxx {
    border: 2px solid #e7642c;
    width: 200px;
    margin: 10px;
    padding: 10px;}
h2, p {
    width: 200px;
    font-size: 80%;
    line-height: 1.4em;}

styles.component.html:

<div class="xxx">
  <h2>Moog</h2>
  <p>Moog synthesisers were created by Dr. Robert Moog under the company name Moog Music. Popular models include the
    Moog Modular, Minimoog, Micromoog, Moog Rogue, and Moog Source.</p>
</div>

屏幕截图:
_{(来源:ebe.co.ke)}

从屏幕截图中您可以看到，文本正在溢出。我做错了什么或如何避免？

Answer 1

你给定了 width: 200px;到 h2 和 p 标签

你可以试试这个

.xxx {
    border: 2px solid #e7642c;
    width: 200px;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}
h2, p {
    width: 100%;
    font-size: 80%;
    line-height: 1.4em;
}

CSS box-sizing 属性允许我们在元素的总宽度和高度中包含填充和边框。