Accodion Answers 的填充 0 不起作用

用户14212992

我已经将“面板”的内边距设置为 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章