Search code examples
htmlcsspadding

Padding after <details> tag

I am trying to add padding after a <details> tag because the next <p> is basically touching it:

enter image description here

I tried adding padding-bottom. However, it merely makes the grey <details> tag larger and doesn't add space.

The CSS I currently have is:

/* Start Drop Down Details */

details {

    padding: .8em;
    background: #353535;
    border-radius: 20px
}

summary::-webkit-details-marker {display: none; }

details summary::before { 
    content:"►"; 
    padding: .7em;
}

details[open] summary::before { 
    content:"▼"; 
    padding: .7em;
}

If you want to see what it looks like live you can see it here: https://www.tendigitgrid.com/d/198-myog-backpacking-quilt-outdoorink#:~:text=recommended%20sewing%20gear

Solution

  • padding adds space between the content and the border. For instance, by making the grey tag bigger.

    margin adds space between the border of an element and the border of other elements.

    If you want to add space between the two elements you will need to add margin:

    details {
    margin-bottom: 1rem;
    padding: .8em;
    background: #353535;
    border-radius: 20px
}