为什么 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

你给定了宽度：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 属性允许我们在元素的总宽度和高度中包含内边距和边框。