Ionic framework 为什么离子5内容填充不起作用？

升级到Ionic 5时，填充属性不再像Ionic 4中那样工作：

<ion-content color="primary" padding></ion-content>

---

有任何修复吗？

根据官方文档，您可以使用这些CSS自定义属性设置

离子内容的填充

组件：

--填充内容的底部填充

--填充若内容的方向是从左到右，则结束右填充；若内容的方向是从右到左，则结束左填充

--填充若内容的方向是从左到右，则开始左填充；若内容的方向是从右到左，则开始右填充

--填充内容的顶部填充

在与组件关联的SCSS文件中，添加：

ion-content {
  --padding-bottom: 10px;
  --padding-end: 10px;
  --padding-start: 20px;
  --padding-top: 20px;
}

这将在内容区域内添加填充。

试试这个

<ion-content color="primary" class="ion-padding"></ion-content>

---

Ionic Framework提供了一组CSS实用程序类，可用于任何元素，以便修改文本、元素位置或调整填充和边距。

在Ionic 4和Ionic 5中，填充的使用如下-：

请参见爱奥尼亚v4中的故事： 在爱奥尼亚v4中，属性的使用遭到了反对，如果您在开发者控制台中注意到的话，爱奥尼亚4会发出警告，警告您使用这些属性来设计样式

Ionic v5中的故事： 在爱奥尼亚v5中，这些属性被永久删除，并被CSS类替换。因此，即使这些属性存在于代码中，也不会产生任何影响

根据断裂变化：

我们最初为样式化组件添加了CSS实用程序属性，因为这是一种快速简单的方式来包装文本或向元素添加填充。一旦我们在“Ionic for everyone”方法中添加了对多个框架的支持，我们很快就发现在使用JSX和Typescript的框架中使用CSS属性存在问题。为了解决这个问题，我们添加了CSS类。为了保持一致性，我们决定删除CSS属性并支持在所有框架和类中工作的内容，而不是在某些框架和其他框架和类中支持CSS属性。除此之外，更改为以ion为前缀的类可以避免与本机属性和用户的CSS冲突。在最新版本的Ionic 4中，控制台中打印了弃用警告，以显示新类是什么，并且自添加类支持以删除对属性的所有引用以来，文档已经更新

解决方案： 您需要将所有属性替换为CSS类。例如：

以前

之后

对于您的情况，请更换

到

不推荐使用这样的填充，现在我们可以使用它：

<ion-content color="primary" class="ion-padding"></ion-content>

---

在爱奥尼亚5中，您这样使用的Pading已被弃用

现在你可以这样用了

---

在答案中添加代码示例而不是依赖链接内容是最佳做法。这样，如果站点URL发生变化或失效，答案仍然有效。这个答案/解决方案肯定会有效，但作者所问的基本上是Ionic v5中的一个突破性变化。正确的解决方案是使用新的属性<代码>离子填充< /代码>。考虑将您的属性“代码>填充< /代码>改为CSS类<代码>离子填充< /代码>。检查我的答案。谢谢，你是救世主。我真的很困惑，因为属性仍然在官方文档中。现在可以使用什么？

<ion-content color="primary" padding></ion-content> 

<ion-content color="primary" class="ion-padding"></ion-content>