Question

我正在为手风琴按钮中的一些奇怪的间距苦苦挣扎。有什么方法可以使它更均匀吗？

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

<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>

Answer 2

<style>
  p {
    font-size: 16px;
    margin: 30px 0px;
  }
</style>

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

<div class="panel">

<p><span><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><span style="font-family:arial,helvetica,sans-serif">Check-in is from 4pm and check-out by 12pm.</span></span></p>
</div>

手风琴按钮中的文字间距奇怪

2 个答案: