在 AEM 中的 Text RTE 组件中调整 html 卡片元素的边距答案

【问题标题】：Adjust margin of html card element within Text RTE component in AEM在 AEM 中的 Text RTE 组件中调整 html 卡片元素的边距
【发布时间】：2019-11-17 14:15:21
【问题描述】：

我已使用 Text RTE 组件来创建要放置在我的网页中的卡片。使用双头箭头（调整大小）工具，我设法调整大小并将三张卡片放在同一行中。

是否可以在html样式内联标签中添加margin-left和margin-right来设置margin？在文本 RTE 编辑器对话框中退出代码编辑器后，它会不断被删除。

如果您之前遇到以下问题，我将非常感谢任何形式的帮助或知识分享。谢谢！

以下是在 Text RTE 组件中创建这些卡片的代码：

<div class="card" style="margin-left:0.5rem; margin-right: 0.5 rem; (Unable to set the margin property here, keeps getting removed)"><div class="card-header bg-transparent"><b><img src="/somepath/image.png" alt="">Document Name</b></div>
<div class="card-body"><br>
<br>
<p>Document Description</p>
<br>
<br>
<p>Document Date: 01/01/1990<br>
</p>
</div>
</div>

【问题讨论】：

标签： html css aem aem-6

【解决方案1】：

你可以添加css代码：

<style>
.card {
  margin-left:0.5rem;
  margin-right: 0.5 rem;
}
</style>

或者您可以在卡之间编码空白卡：

<style>
.blankCard {
  float: left;
  width: 1rem;
}
</style>

    <div class="card"><div class="card-header bg-transparent"><b><img src="/somepath/image.png" alt="">Document Name</b></div>
    <div class="card-body"><br>
    <br>
    <p>Document Description</p>
    <br>
    <br>
    <p>Document Date: 01/01/1990<br>
    </p>
    </div>
    </div>

<div class="blankCard">
</div>

    <div class="card"><div class="card-header bg-transparent"><b><img src="/somepath/image.png" alt="">Document Name</b></div>
    <div class="card-body"><br>
    <br>
    <p>Document Description</p>
    <br>
    <br>
    <p>Document Date: 01/01/1990<br>
    </p>
    </div>
    </div>

【讨论】：