Question

我正试图将h2放在h1正下方，但它似乎正在创造一个巨大的差距/空间。是否有某种方法可以避免这种情况，或者这是编码中的错误？谢谢。

链接到网站： http://younani.com/armen/musicindex.html

HTML：

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Armens website</title>
    <meta charset="utf-8">
</head>
<body>
<div class="clearfix" id="container">
<p><link rel="stylesheet" href="armen.css" /></p>
<h1><i>Four To The Floor</i></h1>
<h2>Artist Management &amp; Events</h2>
<p></p>
<h3>&ldquo;It&rsquo;s not where you take things from,<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; it&rsquo;s where you take them to.&rdquo; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="mailto:fttfmusic@gmail.com">fttfmusic@gmail.com</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="http://www.fttfmusic.com/">www.fttfmusic.com</a></p>
</div>
</div>
</body>
</html>

CSS：

h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 70px;
text-align: center; }

@font-face {
    font-family: 'ballparkweiner';
    src: url('ballw___.eot');
    src: url('ballw___.eot?#iefix') format('embedded-opentype'),
         url('ballw___.woff') format('woff'),
         url('ballw___.ttf') format('truetype'),
         url('ballw___.svg#ballparkweiner') format('svg');
    font-weight: normal;
    font-style: normal;

}

h2 {text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}

body {background-color: #000000;}

h3 {text-align: center; color: #FFFFFF; }

#footer { font-weight: bold; text-align: center; font-family: Audimat;
    clear: both; width:48%;
        border-radius: 8px;
        background-color:black;
        text-align:center; margin-right:auto;
        margin-left:auto; color: #FFFFFF; }

Answer 1

浏览器中的

h*元素往往有一些相当大的默认顶部和底部边距。您可以将它们专门设置为较小的值，甚至为零：

h1, h2 {
    margin-top: 0;
    margin-bottom: 0;
}

您当然可以将这些规则应用于您的特定标题。

Answer 2

将此添加到您的css：

h1, h2 {
    margin: 0px;
}

Answer 3

这是margin和h1上的h2。在CSS中调整它们，例如

h1, h2 {margin: 0;}

Answer 4

代码： - 你可以试试这个

<div id="container" class="clearfix">
<p><link href="armen.css" rel="stylesheet"></p>
<h1 style="margin-bottom: -18px; margin-top: 0px;"><i>Four To The Floor</i></h1>
<h2 style="margin-top: 0px; margin-bottom: 0px;">Artist Management &amp; Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; it’s where you take them to.” <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="mailto:fttfmusic@gmail.com">fttfmusic@gmail.com</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="http://www.fttfmusic.com/">www.fttfmusic.com</a></p>
</div>
</div>

请参阅此链接http://css-tricks.com/forums/discussion/3825/solved-h1-and-h2-tags-leaving-too-much-space/p1

标题1和标题2之间的间隙/空格

4 个答案: