时间戳

首页 > 解决方案 > 为什么 css margin-right 在 angular 8 上无效，带有清晰-ui？

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

问题描述

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

我有一个带有清晰设计系统的 angular 8 项目。我已经设置了标题和垂直导航，如下面的屏幕截图所示：

在内容区域，我正在尝试一些 CSS。
问题：以下规则的边距设置在右侧似乎无效。

样式.component.css：

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

样式.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）看到右边距溢出

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

标签： cssangularvmware-clarity

解决方案

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

推荐阅读