打开手风琴后取下衬垫

Question

我有一个手风琴，我已经添加了圆角，但是，每次我在手风琴中打开一个元素时，我添加的填充包括圆角附加到手风琴元素的内部。任何人都可以咨询我如何摆脱这种填充？

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?

Answer 2

这是一个重置问题。使用下面的CSS将所有边距和填充设置为0.

* {margin:0; padding:0;}

这是jsfiddle

更新：仅保留顶部和底部＆＃34;边框＆＃34;只需为top和bottom设置填充。

.accordion { padding: 10px 0; }

这是jsfiddle

Answer 3

在制作动画时，jQuery会添加overflow: hidden;，为您添加额外的填充。

考虑添加没有任何样式的<tag>以避免overflow: hidden;的副作用

Answer 4

我认为你应该调整<P>的上下边距。 如果它适合您，请告诉我：in this fiddle