1

I have an accordion that I've added rounded corners to, however, each time I open up an element within the accordion, the padding that I've added to include the rounded corners gets attached to the inside of the accordion element. Can anyone consult me on how to get rid of this padding?

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>

Picture:

Picture

chronotrigga
  • 589
  • 1
  • 10
  • 33
  • 1
    Would it be possible to provide a working plunkr or JSFiddle? – Gabriel Kohen Apr 17 '15 at 21:14
  • Working jsfiddle, thank you http://jsfiddle.net/rgs6vLub/ – chronotrigga Apr 17 '15 at 21:29
  • Are you referring to the black above and below the white? – hungerstar Apr 17 '15 at 21:31
  • That is correct (when you click the accordion). I would also ideally like it for the left and right padding to be removed as well. The black is just a default color it should technically be that blue #456db5. – chronotrigga Apr 17 '15 at 21:32
  • _“the padding that I've added to include the rounded corners gets attached to the inside of the accordion element”_ – no, it doesn’t. That extra black space above and below the `dd` element comes from the default margins of the `p` element inside it (keyword: collapsing/adjoining margins). – CBroe Apr 17 '15 at 21:34
  • If you remove the margin from the `p` that is causing the black bar between the A and your list and remove the left and right padding of the accordion it will look like this: http://jsfiddle.net/rgs6vLub/ – hungerstar Apr 17 '15 at 21:36

4 Answers4

2

There is CSS coming from the browser itself. You can reset this for your specific element by adding the following CSS:

.accordion dd p{margin:0;}

Each browser will have their own set of default CSS rules. This can make it difficult to develop cross browser code that looks the same in all browsers.

You can normalize or reset your CSS depending on your preferences.

Using one or the other is generally recommended over using nothing.

Here is a good discussion on the differences between the two: What is the difference between Normalize.css and Reset CSS?

Community
  • 1
  • 1
xengravity
  • 3,501
  • 18
  • 27
1

It is a resetting issue. Use the below CSS to set all margin and padding to 0. 

* {margin:0; padding:0;}

Here is a jsfiddle

Update: To keep only the top and bottom "borders" just set your padding only for top and bottom. 

.accordion { padding: 10px 0; }

Here is a jsfiddle

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
  • Thank you very much for this! Is there a way I can remove the left and right borders and just keep the top and bottom? – chronotrigga Apr 17 '15 at 21:48
  • Is there a way to localize the `* { }` CSS so it is only the accordion element? I have other styles and this is overriding my code. – chronotrigga Apr 20 '15 at 16:11
  • 1
    You could try the rule `.accordion, .accordion * {margin:0; padding:0;}` instead of the more generic `* {margin:0; padding:0;}` – Tasos K. Apr 20 '15 at 16:14
0

While animating, jQuery add a overflow: hidden; that adding you the extra padding.

Consider adding <tag> that don't have any style to avoid the side effect of overflow: hidden;

romuleald
  • 1,406
  • 16
  • 31
0

I think you should adjusted the top and bottom margin of the <P>. Let me know if it works for you: in this fiddle

Gabriel Kohen
  • 4,166
  • 4
  • 31
  • 46