我已经将“面板”的内边距设置为 0。但我看到了这个内边距/空白(在下图中用红色块标记)。这个填充/空白来自哪里?
这是代码:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding-top: 18px;
padding-bottom: 18px;
padding-left: 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding-top: 0px;
padding-bottom: 0px;
display: none;
background-color: white;
overflow: hidden;
}
<button class="accordion">Section 1</button>
<div class="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
因为p
里面的元素.panel
有默认margin
设置。
您需要将边距设置为0
:
.panel p {
margin-top: 0;
margin-bottom: 0;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句