为什么我的手风琴有间隙并且即使我放置边距和填充 0px 也是间隔的答案

【问题标题】：why does my accordion have gaps and are spaced even tho I put margin and padding 0px为什么我的手风琴有间隙并且即使我放置边距和填充 0px 也是间隔的
【发布时间】：2013-08-01 19:14:54
【问题描述】：

您好，我用 Bootstrap 为我的教堂制作了一个网站，并将其制作成 Wordpress。我想知道，当我分离所有 Wordpress 文件时，我的手风琴为什么会这样。

蓝色条应该是接触的，它不应该太粗，因为它在手风琴的标题下方和上方留出空间。

假设看起来像这样：

这是我在手风琴上的所有 css：

 .accback {
     margin-top:-20px;

     }

 .accordion-inner ul li {
     list-style:none;
     line-height:35px;
     color:black;


     }

 .accordion-toggle {
     color:white;
     padding:0px;
     margin:0px;
     border:0px;
 }
 .accordion-toggle a {
     color:white;
     padding:0px;
     margin:0px;
     border:0px;
 }

 .accordion-heading{
      padding:0px;
     margin:0px;
     border:0px;
     }

     .accordion-group{
         padding:0px;
     border:0px; 

         }
  .accordion {
     margin:auto;
     padding:50px 20px 40px 20px;
     max-width:500px;
     border:0px;
 }

这是我的手风琴：

 <div class="hidden-desktop container">
    <div class="accback">
   <div class="accordion text-center" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading btn-primary">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Events<div class="pull-left"><i class="icon-chevron-down icon-white"></i></div>
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
       <ul>
      <li>Facebook</li>
      <li>Twitter</li>
      <li>Instagram</li>
      <li>LinkIn</li>
      </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading btn-primary">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"><div class="icon-chevron-down icon-white pull-left"></div>
        Schedule
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul>
      <li>(818)111-1111</li>
        <li>(818)222-2222</li>
         <li>(818)333-3333</li>
          <li>(818)444-4444</li>
      </ul>
      </div>
    </div>
  </div>
   <div class="accordion-group">
    <div class="accordion-heading btn-primary">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"><div class="icon-chevron-down icon-white pull-left"></div>
       Worship Night
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
      <ul>
      <li>
       blah blah blah blah blah
        </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading btn-primary">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"><div class="icon-chevron-down icon-white pull-left"></div>
        Follow Us
      </a>
    </div>
    <div id="collapseFour" class="accordion-body collapse">
      <div class="accordion-inner">
       <ul>
      <li>Facebook</li>
      <li>Twitter</li>
      <li>Instagram</li>
      <li>LinkIn</li>
      </ul>
      </div>
    </div>
  </div>
</div>
</div><!---Background of Accordions--->
   </div>

【问题讨论】：

你能在 Jsfiddle 中分享你的代码吗？
并不是因为它都在 Wordpress 的单独 .php 文件中，而是网站ichurchinla.com
我不能把它放在 JSfiddle 中，因为它都在单独的 .php 文件中，这就是问题发生的时候。如果它是一个常规的 .html 文件，它工作正常但是当我把它作为单独的 .php 文件是这样做的。
我在提供的网站上看不到那架手风琴？
那是因为它的手机你必须缩小你的窗口大小

标签： html css wordpress twitter-bootstrap accordion

【解决方案1】：

您的代码在我的浏览器中运行良好。

也许它正在占用其他 css 文件的空间。请在单独的文件中尝试。

或者找到它占用空间的地方并删除它。

【讨论】：