如何从 p:panel 内容中删除填充

Answer 1

您的 CSS 选择器

.ui-panel-content, .ui-widget-content {
    ...
}

基本上意味着：“选择具有

ui-panel-content

或

ui-widget-content

类的所有元素”。

但是，填充是通过此 CSS 选择器在 PrimeFaces 默认 CSS 中定义的

.ui-panel .ui-panel-content {
    ...
}

基本上意味着 “选择具有

ui-panel-content

类的所有元素，该类是具有

ui-panel

类的元素的子元素”，这是根据 CSS 级联规则 更强的选择器。因此，它的优先级高于 CSS 选择器。这与样式类的声明顺序无关（仅当选择器具有相同强度时声明顺序才重要）。

当覆盖 PrimeFaces 默认 CSS 时，您应该提供一个“至少”相同强度或更强的选择器。在您的特定情况下，如果您打算全局应用样式，只需使用相同的选择器：

.ui-panel .ui-panel-content {
    padding: 0;
}

请注意，当在 

<style>

中使用

<h:head>

时，它仍然会被 PrimeFaces 默认 CSS 覆盖，因为它会自动包含在头部末尾。而是将

<style>

移至

<h:body>

，或者更好的是，将其放入自己的 CSS 文件中，通过

<h:houtputStylesheet>

将其包含在

<h:body>

内。另请参阅：

如何使用自定义样式覆盖默认的 PrimeFaces CSS？
CSS 选择器语法

Answer 2

:host {
  &::ng-deep {
    .p-panel-content {
      padding: 0;
    }
  }
}