Question

<body>
<h1><p id="title"><font="Arial">Beyblade Metal Web</font></p></h1>

<br>
<center>
<div id="navbar">
   <ul>
     <li><a href="3.html">Video Games</a></li>
     <li><a href="4.html ">News</a></li>
     <li><a href="5.html ">Tips</a></li>
     <li><a href="6.html ">Episodes</a></li>
     <li><a href="7.html ">Beyblades</a></li>
     <li><a href="8.html ">Products</a></li>
   </ul>
 </div>
</center>
</br>
</body>

这只是身体。 “标题”和“导航栏”之间存在差距，我想摆脱它。我怎样才能做到这一点？我宁愿不使用CSS来解决这个问题，但如果我必须这样做的话。

Answer 1

删除<br>之前的<center>。

Answer 2

这确实是一个CSS问题。您应该在margin和padding元素上将0和h1属性设置为p，如下所示：

h1, p {
    margin: 0;
    padding: 0;
}

此外，据我所知， p不允许成为h1元素的子项，因此您可能还想删除它。 ..

Answer 3

取出在标题和导航栏之间添加空格的所有内容（<p>，<font>，<br>，未关闭<h1>），所以它看起来像这样：

<body>
<h1 style="font-family: arial">Beyblade Metal Web</h1>

<center>
<div id="navbar">

...

Answer 4

默认情况下，<p>和<h1>在它们之前和之后都有间距。您的代码中还有一个<br>，这是一个换行符。如果要删除间距，请将HTML更改为：

<html>
    <body>
        <h1 style="margin: 0; padding: 0px;"><p id="title" style="margin: 0; padding: 0px;"><font="Arial">Beyblade Metal Web</font></p></h1>
        <div id="navbar" style="text-align: center;">
            <ul>
                <li><a href="3.html">Video Games</a></li>
                <li><a href="4.html">News</a></li>
                <li><a href="5.html">Tips</a></li>
                <li><a href="6.html">Episodes</a></li>
                <li><a href="7.html">Beyblades</a></li>
                <li><a href="8.html">Products</a></li>
            </ul>
        </div>
    </body>
</html>

这是使用inline CSS来实现结果。您可能希望将这些样式放入类中。

如何摆脱这两个对象之间的空间？

4 个答案: