在 aui:row 之间添加 space

Question

如图所示，<aui:container> 的边框和顶部之间没有 space。

我已经尝试了不同的方法来增加 css 间距，例如填充或边距，但没有任何反应。

你能帮我在图片中箭头指向的地方添加 space 吗？

谢谢

这里是 jsp 文件：

<%@page import="xxx.CreatePortlet"%>
<%@ include file="init.jsp"%>
<html>
<body class="borderBlackOne">

    <div class="bottomLine" id="MainTitle" style="text-align: center">
        <h1>Créer une REP</h1>
    </div>

    <aui:form action="<%=updateRepAction%>" method="post" id="updateForm" name="<portlet:namespace/>updateForm">

        <aui:fieldset>

            <aui:container cssClass="borderBlackOne">

                <aui:container cssClass="paddingTop"> <!-- Don't work -->

                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.nameLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:input cssClass="" name="repName" required="true" label="" type="text" value="" />
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Nom de l'auteur -->
                <aui:container>
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.authorNameLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <span class="fill">${authorName}</span>
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Commentaire -->
                <aui:container cssClass="">
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.comentaryLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:input cssClass="" name="comentary" label="" type="textarea" value="" />
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Configuration services -->
                <aui:container>
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.ServiceLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:container cssClass="borderBlackOne">
                                <aui:row>
                                    <aui:col cssClass="alignRight" width="<%=25%>">
                                        <span class="bold black"><liferay-ui:message
                                                key="manage.rep.servicesLabel" /></span>
                                    </aui:col>


                                    <aui:col width="<%=75%>">
                                        <aui:input name="comentary" label="" type="textarea" value="" />
                                    </aui:col>
                                </aui:row>
                                <aui:row>
                                    <aui:col cssClass="alignRight" width="<%=25%>">
                                        <span class="bold black"><liferay-ui:message
                                                key="manage.SystemeLabel" /></span>
                                    </aui:col>


                                    <aui:col width="<%=75%>">
                                        <aui:input name="comentary" label="" type="textarea" value="" />
                                    </aui:col>
                                </aui:row>
                            </aui:container>
                        </aui:col>
                    </aui:row>
                </aui:container>
                <aui:button-row cssClass="alignRight">
                        <aui:button type="cancel" value="Annuler"></aui:button>
                        <aui:button type="submit" value="Ok"></aui:button>
                </aui:button-row>
            </aui:container>
        </aui:fieldset>
    </aui:form>
</body>
</html>

这里是 css 文件：

/* Don't work */
.create .paddingTop {
    margin-top: 5%
}

/* Don't work */
.create .paddingBottom {
    margin-bottom: 25px;
}

/* Don't work */
.create .marges {
    margin: 25px 0px 50px 0px;
}

.create .black {
    color: black;            
}

.create .bold {
    font-weight: bold;
}

.create .alignRight {
    text-align: right;
}

.create .borderBlackOne {
    border: 1px solid black;            
}

Answer 1

aui:container 和 aui:row 生成 HTML div 元素，因此 margin-x 应该有效。我认为，问题可能出在您定义的 CSS 选择器上，或者它们可能存在冲突。

尝试：
1. 在 CSS 属性后添加 !important（例如 margin-top: 5% !important;）。或者
2. 从 CSS 选择器中删除 .create。或者
3. 1 和 2。

在 aui:row 之间添加 space

Add space between aui:row

liferay

liferay-aui

liferay-7