需要帮助自定义jQuery portlet

Question

我对CSS的经验很少，并且不知道如何自定义jQuery portlet。

我有以下内容： Image link

我希望有这样的事情： Image link

HTML：

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
        <span class="glyphicon glyphicon-trash"></span>
        <span class="glyphicon glyphicon-plus portlet-toggle"></span>
            nuevo campo
    </div>
    <div class="portlet-content" style="display: none;">
    </div>
</div>    

CSS：

.portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
}

.portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
}

.portlet-toggle {
    position: absolute;
    top: 50%;
    right: 1%;
    margin-top: -8px;
}

.portlet-content {
    padding: 0.4em;
}

.portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
}

我怎么能实现这个目标？

Answer 1

从.portlet类中删除填充，并向.portlet-header类添加更多填充。

Answer 2

.ui-dialog{
  margin:0;
  padding:0;
}