javascript - 打开 Accordion 后删除填充

Question

我有一个 Accordion ，我已经添加了圆 Angular ，但是，每次我打开 Accordion 中的一个元素时，我添加的包含圆 Angular 的填充会附加到 Accordion 元素的内部.谁能咨询我如何摆脱这种填充？

http://jsfiddle.net/rgs6vLub/

CSS:

.accordion {
    background-color:#000;
    border-radius:10px;
    padding:10px
}    
.accordion dt {
    padding:.5em;
    background-color:#456db5;
    cursor:pointer;
    border-bottom:1px solid #355faa;
    font-size:13px
}    
.accordion dt:hover {
    color:#fff
}    
.accordion .on {
    background-color:#456db5;
    cursor:default
}    
.accordion dt,.accordion .on:hover {
    color:#fff
}    
.accordion dd {
    padding-left:1em;
    margin:0 auto;
    padding-right:.5em;
    background-color:#fff;
    font-size:14px
}    
.accordion dd p {
    padding-top:.5em;
    padding-bottom:.5em
}

HTML:

<dl class="accordion">
    <dt>Headline</dt>

    <dd>
        <p>Text</p>
    </dd>
</dl>

图片:

Answer 1

CSS 来自浏览器本身。您可以通过添加以下 CSS 为您的特定元素重置此设置:

.accordion dd p{margin:0;}

每个浏览器都有自己的一组默认 CSS 规则。这会使开发在所有浏览器中看起来都一样的跨浏览器代码变得困难。

您可以 normalize或 reset你的 CSS 取决于你的喜好。

通常建议使用一种或另一种，而不是什么都不使用。

这里有一个关于两者之间差异的很好的讨论:What is the difference between Normalize.css and Reset CSS?