標題1和2之間的差距/空間

我試圖將h2放在h1的正下方，但似乎創建了巨大的差距/空間。有沒有一種方法可以避免這種情況，或者這是編碼錯誤？謝謝。標題1和2之間的差距/空間

鏈接到網站： 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:[email protected]">[email protected]</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; }

來源

2013-04-09 KKP

h*元素往往有一些..相當大的默認頂部和底部邊緣。只需將他們專門一些較小的值，甚至是零：

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

當然，你可以將這些規則應用於特定頭。

來源

2013-04-09 04:32:11

這是h1和h2上的margin。在你的CSS中調整它們，例如

h1, h2 {margin: 0;}

來源

2013-04-09 04:32:16

添加到您的CSS：

h1, h2 { 
    margin: 0px; 
}

來源

2013-04-09 04:32:26 Arbel

代碼： - 你可以試試這個

<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:[email protected]">[email protected]</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="http://www.fttfmusic.com/">www.fttfmusic.com</a></p> 
</div> 
</div>

請參閱本LINK http://css-tricks.com/forums/discussion/3825/solved-h1-and-h2-tags-leaving-too-much-space/p1

來源

2013-04-09 04:35:35 Darshan

標題1和2之間的差距/空間

回答

相關問題