html - Accordion 按钮内的奇怪文本间距

Question

我正在为 Accordion 按钮中的一些奇怪间距而苦苦挣扎。有没有办法让它更统一？

我尝试删除所有   标签并尝试添加边距。

<button class="accordion">What can I expect at my hotel?</button>

<div class="panel">
<p>&nbsp;</p>

<p><span style="font-size:16px"><span style="font-family:arial,helvetica,sans-serif">All rooms will have a hairdryer, an iron, a small safe and tea and coffee making facilities. Basic Wi-Fi is included.</span></span></p>

<p><span style="font-size:16px"><span style="font-family:arial,helvetica,sans-serif">Check-in is from 4pm and check-out by 12pm.</span></span></p>
</div>

结果应该是两段文字，顶部和底部的边距统一，但我实际得到的是顶部的大空间和底部的小空间

Answer 1

默认情况下，CSS 会为您的元素添加一些默认边距和填充，您应该始终从通用重置开始，就像我在 CSS 代码中所做的那样，以消除这种不需要的行为。然后您可以根据需要定义自己的边距和填充。

*,*:before,*:after {
  margin:0;
  padding:0;
}

<button class="accordion">What can I expect at my hotel?</button>

<div class="panel">
<p>&nbsp;</p>

<p><span style="font-size:16px"><span style="font-family:arial,helvetica,sans-serif">All rooms will have a hairdryer, an iron, a small safe and tea and coffee making facilities. Basic Wi-Fi is included.</span></span></p>

<p><span style="font-size:16px"><span style="font-family:arial,helvetica,sans-serif">Check-in is from 4pm and check-out by 12pm.</span></span></p>
</div>