html - Wordpress 使用详细信息标签创建奇怪的间距

Question

我正在创建一个缩进菜单，用于访问我的机器人团队的资源 website .当它作为带有“custom.css”文件的独立 HTML 页面运行时，它可以完美运行。当我在 Wordpress 中粘贴代码时，细节在垂直方向上相距大约一英寸。我在 theme.css(我正在使用 Hueman 主题)中找不到任何可以执行此操作的内容。如果我在可视化编辑器中做任何事情，它会移动我的“显示”标签来破坏 HTML。这是html代码

<div style="display:block;">
<!--team documents--><details><summary>Team Documents</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Team-Handbook.pdf">Power Hawks Team Handbook</a>
<a href="https://drive.google.com/file/d/0B6AhVZidEPEeSl9sNXV0aUx3MDA/view">Identity Standards Document</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Robotics2014-2015-Sponsorship-Package.pdf">Sponsorship Package</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Driver-Permission.pdf">Driver Form</a>
</details><!--team documents-->

<!--document templates--><details><summary>Document Templates</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Word-Template.docx">Power Hawks Word Template</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Powerpoint-Template.potx">Power Hawks Powerpoint Template</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Team-letterhead.docx">Team letterhead</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Document-cover.indd">Document cover</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Envelope.indd">Envelope</a>
</details><!--document templates-->



<!--visual media--><details ><summary>Visual Media</summary>
<!--logos--><details class="indent1"><summary>Logos</summary>

<!--primary logo--><details class="indent2"><summary>Primary Logo</summary>

<!--primary color--><details class="indent3"><summary>Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.png" alt="Primary Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.dwg">Primary Logo Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.emf">Primary Logo Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.eps">Primary Logo Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.png">Primary Logo Color PNG</a>
</details ><!--primary color-->

<!--primary grayscale--><details class="indent3"><summary>Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.png" alt="Primary Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.dwg">Primary Logo Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.emf">Primary Logo Grayscale EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.eps">Primary Logo Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.png" target="_blank">Primary Logo Grayscale PNG</a>
<!--primary grayscale--></details>

<!--primary black--><details class="indent3"><summary>Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.png" alt="Primary Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.dwg">Primary Logo Black&amp;White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.emf">Primary Logo Black&amp;White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.eps">Primary Logo Black&amp;White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.png" target="_blank">Primary Logo Black&amp;White PNG</a>
<!--primary black--></details>

<!--primary logo--></details>


<!--hawk head--><details class="indent2"><summary>Hawk Head</summary>

<!--head color--><details class="indent3"><summary>Hawk Head Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.png" alt="Hawk Head Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.dwg">Hawk Head Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.emf">Hawk Head Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.eps">Hawk Head Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.png" target="_blank">Hawk Head Color PNG</a>
</details><!--head color-->

<!--head grayscale--><details class="indent3"><summary>Hawk Head Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.png" alt="Hawk Head Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.dwg">Hawk Head Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.emf">Hawk Head Grayscale EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.eps">Hawk Head Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.png" target="_blank">Hawk Head Grayscale PNG</a>
</details><!--head grayscale-->

<!--head black--><details class="indent3"><summary>Hawk Head Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.png" alt="Hawk Head Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.dwg">Hawk Head Black&amp;White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.emf">Hawk Head Black&amp;White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.eps">Hawk Head Black&amp;White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.png" target="_blank">Hawk Head Black&amp;White PNG</a>
</details><!--head black-->
</details><!--hawk head-->



<!--text logo--><details class="indent2"><summary>Text Logo</summary>

<!--tl color--><details class="indent3"><summary>Text Logo Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.png" alt="Text Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.dwg">Text Logo Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.emf">Text Logo Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.eps">Text Logo Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.png" target="_blank">Text Logo Color PNG</a>
</details><!--tl color-->

<!--tl grayscale--><details class="indent3"><summary>Text Logo Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.png" alt="Text Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.dwg">Text Logo Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.emf">Text Logo Grayscale EMF</a>
<a href="http://powerhawks.org/wp/wp-content/uploads/2014/08/textuallogo-grayscale.eps">Text Logo Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.png" target="_blank">Text Logo Grayscale PNG</a>
</details><!--tl grayscale-->

<!--tl black--><details class="indent3"><summary>Text Logo Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.png" alt="Text Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.dwg">Text Logo Black&amp;White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.emf">Text Logo Black&amp;White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.eps">Text Logo Black&amp;White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.png" target="_blank">Text Logo Black&amp;White PNG</a>
</details><!--tl black-->

</details><!--text logo-->


<!--stamp--><details class="indent2"><summary>Stamp</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/stamp.png" alt="Stamp" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.dwg">Stamp DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.emf">Stamp EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.eps">Stamp EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.png" target="_blank">Stamp PNG</a>
</details><!--stamp-->

</details><!--logos-->


<!--fonts--><details class="indent1"><summary>Fonts</summary>
<!--title font--><details class="indent2"><summary>Title Font Family</summary>
<p style="indent2">The primary title font family (Serpentine) should be used as a primary heading in all written communication. The secondary title font family (Helvetica) should be used as a subheading in all written communication.</p>
<!--serpentine--><details class="indent3"><summary>Serpentine</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/SerpentineStd-Bold.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/serpentine.png" class="fontimg"></a>
</details><!--serpentine-->

<!--helvetica--><details class="indent3"><summary>Helvetica</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica.png" class="fontimg"></a>
</details><!--helvetica-->

<!--helvetica black--><details class="indent3"><summary>Helvetica Black</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica-black.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica-Black.png" class="fontimg"></a>
</details><!--helvetica black-->
</details><!--title font-->

<!--para font--><details class="indent2"><summary>Paragraph Font Family</summary>
<p style="indent2">The paragraph font family should be used in all correspondence in paragraph form when under 14 point font.</p>
<!--times--><details class="indent3"><summary>Times New Roman</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/times.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Times.png" class="fontimg"></a>
</details><!--times-->
</details><!--para font-->

<!--display font--><details class="indent2"><summary>Display Font Family</summary>
<p style="indent2">The display font family should be used with correspondence in paragraph form when over 14 point font.</p>
<!--arial--><details class="indent3"><summary>Arial</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/arial.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Arial.png" class="fontimg"></a>
</details><!--arial-->

<!--arial black--><details class="indent3"><summary>Arial Black</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/arial-black.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/arial-black.png" class="fontimg"></a>
</details><!--arial black-->
</details><!--display font-->
</details><!--fonts-->

<!--color palette--><details class="indent1"><summary>Color Palette</summary>
<div id="wrapper">
<p class="palette" style="background-color:#4169E1;">Power Hawk Blue<br> Hex: 4169E1 <br> RGB: R: 65, G: 105, B: 225 <br> CMYK: C: 71, M: 53, Y: 0, K: 12 <br> Pantone: #281 C</p>
<p class="palette-light" style="background-color:#FFFFFF;">White<br>Hex:FFFFFF<br>RGB: R: 255, G: 255, B: 255<br>CMYK: C: 0, M: 0, Y: 0, K: 0<br>Pantone: #9063 C</p>
<p class="palette" style="background-color:#2f3f58;">Dark Blue<br>Hex: 2f3f58<br>RGB: R: 47, G: 63, B: 88<br>CMYK: C: 47, M: 28, Y: 0, K: 65<br>Pantone: #534 C</p>
<p class="palette-light" style="background-color:#9eb0c9;">Slate Blue<br>Hex: 9eb0c9<br>RGB: R: 158, G: 176, B: 201<br>CMYK: C: 21, M: 12, Y: 0, K: 21<br>Pantone: #536 C</p>
<p class="palette" style="background-color:#c74f4f;">Power Hawk Red<br>Hex: c74f4f<br>RGB: R: 199, G: 79, B: 79<br>CMYK: C: 0, M: 60, Y: 60, K: 22<br>Pantone: #7418 C</p>
<p class="palette-light" style="background-color:#f0ebe7;">Cool Gray<br>Hex: f0ebe7<br>RGB: R: 240, G: 235, B: 231<br>CMYK: C: 0, M: 2, Y: 4, K: 6<br>Pantone: #1 C</p>
<p class="palette" style="background-color:#000000;">Black<br>Hex: 000000<br>RGB: R: 0, G: 0, B: 0<br>CMYK: C: 0, M: 0, Y: 0, K: 100<br>Pantone: #6 C</p>
</div>
</details><!--color palette-->
</details><!--vis med-->


<!--other resources--><details style="float: left;"><summary>Other Resources</summary>
<a href="https://www.flickr.com/photos/114070590@N03/" alt="Flickr">Flickr</a>
<a href="http://www.powerhawks.org/scouting/" alt="Scouting">Scouting</a>
<a href="https://www.usfirst.org" alt="FIRST">FIRST</a>
</details><!--other resources-->
</div>

这是自定义 CSS

#wrapper{overflow:hidden; height:auto;} /*for the div on color palette to auto height properly*/

0 .indent1{边距-左:25px;右边距:自动；

.indent2{margin-left:50px; margin-right:auto;}

.indent3{margin-left:70px; margin-right:auto;}

.palette-light{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
font-color:white;
color:black;}

.palette{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
font-color:white;
color:white;}

/*overrides*/

summary{font-size:20px;}

/*font*/
h1,h2,h3,summary{font-family:serpentine;}
h4,h5,h6{font-family:helvetica;}
body{font-size:200%;}
@font-face {
    font-family: 'serpentine';
    src: url('fonts/SerpentineStd-Bold.eot');
    src:     url('fonts/SerpentineStd-Bold.otf') format('opentype'),
         url('fonts/SerpentineStd-Bold.woff') format('woff'),
         url('fonts/SerpentineStd-Bold.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'helvetica';
    src: url('fonts/Helvetica.eot');
    src: url('fonts/Helvetica.otf') format('opentype'),
        url('fonts/Helvetica.woff') format('woff'),
        url('fonts/Helvetica.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

主题css中唯一关于细节的代码是

{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

和

{ list-style: none; }

Answer 1

在 fire bug 中，我看到每个 div 下面都有空段落和 br。只需删除它即可。

<p><!--document templates--></p>
<p><!--visual media--><br>
</p><details>