Primefaces整页布局，布局单元边缘不可见

Question

在使用全页布局时，它们各自屏幕边的布局单元边缘不可见，即北单元的上边缘、西单元的左边缘、东单元的右边缘和南单元的下边缘。

布局代码是

<p:layout fullPage="true">
    <p:layoutUnit position="north">
        <h:outputText value="Top content." />
    </p:layoutUnit>
    <p:layoutUnit position="south">
        <h:outputText value="Bottom content." />
    </p:layoutUnit>
    <p:layoutUnit position="west">
        <h:outputText value="Left content" />
    </p:layoutUnit>
    <p:layoutUnit position="east">
        <h:outputText value="Right Content" />
    </p:layoutUnit>
    <p:layoutUnit position="center">
        <h:outputText value="Center Content" />
    </p:layoutUnit>
</p:layout>

以下是我得到的显示

我尝试将边距应用于布局单元，但似乎没有任何影响。

Answer 1

边框在您的屏幕截图中非常明显：

但如果你愿意，你可以让它们更加突出，例如北方人：

/* add top margin only to the top level north layout unit,
so as not to add margins betweens units */
body > .ui-layout-north {
    margin-top: 4px !important;
}

Answer 2

您尝试过 !important 吗？ 像这样：

header{
margin-left 10px !important;
}

这样它会覆盖任何预编码的代码

或者尝试将padding设置为0，比如：

padding: 0 !important;