在 <details> 标签后填充

Question

我正在尝试在 <details> 标签后添加填充，因为下一个 <p> 基本上会触及它...

我尝试添加 padding-bottom 但它只会使灰色标签变大而不会添加 space...

我目前拥有的CSS是：

// 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;
}

如果你想看到现场直播的样子，你可以在这里看到：https://www.seekadventure.net/d/198-myog-backpacking-quilt-outdoorink

Answer 1

填充在内容和边框之间添加 space，即使灰色标签变大。

边距在一个元素的边框和其他元素的边框之间添加 space。

如果要在两个元素之间添加 space，则需要添加边距。

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

在 <details> 标签后填充

Padding after <details> tag

html

css

padding