填充底部显示近两倍的尺寸

Question

我有填充问题。我在'widgetdiv4'元素中添加了“padding：30px”，它看起来像我希望的顶部和左边但是由于某种原因底部填充几乎是两倍，我不知道为什么。这是代码：

<div class="large-4 columns" id="default_right">
<div id="rightsidebar" class="WidgetContainer">
    <div id="widget_16038" class="widget-menu-widget namenus-projects">
        <div class="widget basic widgetdiv1">
            <div class="widget basic widgetdiv2">
                <div class="widget basic widgetdiv3">
                    <div class="widget basic widgetdiv4">
                        <h3 class="widgettitle">Projects</h3>
                        <div class="menu_primary">
                            <ul>
                                <li class=" nested-menu-item"><a href="/"><span class="not-tc">Project 1</span></a></li>
                                <li class=" nested-menu-item"><a href="/"><span class="not-tc">Project 2</span></a></li>
                                <li class=" nested-menu-item"><a href="/"><span class="not-tc">Project 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="widget_16039" class="widget-menu-widget namenus-menu-widget">
        <div class="widget basic widgetdiv1">
            <div class="widget basic widgetdiv2">
                <div class="widget basic widgetdiv3">
                    <div class="widget basic widgetdiv4">
                        <h3 class="widgettitle">Menu</h3>
                        <div class="menu_primary">
                            <ul>
                                <li class=" nested-menu-item"><a href="/"><span class="not-tc">Link 1</span></a></li>
                                <li class=" nested-menu-item"><a href="/"><span class="not-tc">Link 2</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

的CSS：

.widgetdiv4{
    padding: 30px;
}
ul, ol, dl {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 1.25rem;
      list-style-position: outside;
     font-family: inherit;
}

祝福！

Answer 1

您需要中和浏览器的默认样式。底部有更多空间的原因是因为它继承了通用ul的属性。

以下是该问题的屏幕截图：

看起来像这样

         ul, ol, dl {
          font-size: 1rem;
          line-height: 1.6;
          margin-bottom: 1.25rem;
          list-style-position: outside;
         font-family: inherit;

在嵌套ul：

上执行此操作

    .parentselector ul { margin-left: 0px; margin-bottom: 0px }