-2

私が尋ねる前に同じ質問をたくさんしてすみません...私はこれらをたくさん読みました、そしてそれらはすべて変化を言います

margin: 0;

2つのdiv（div class="heady"とdivclass= "menus"）の間にギャップがあります。空白を取り除くことができないようです。十分に明確であるといいのですが、そうでない場合はお知らせください。

ジェームスに感謝します。

html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>website</title>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <link rel="stylesheet" type="text/css" href="CSS/style1.css" />
    <body>
    <div class="heady">

    <br></br>
    <h1><a class="header" href="index.html">website</a></h1>
    </div>

    <div class="menus">

    <ul>
        <il><a class="list" href="x.html">About</a></il>
        <t> | </>
        <il><a class="list" href="y.html">Beginners</a></il>
        <t> | </>
        <il><a class="list" href="z.html">Advanced</a></il>
        <t> | </>
        <il><a class="list" href="contact.html">Contact</a></il>

    </ul>
    </div>

    </body>
</html>

CSS

/*general rules*/

html,body {
    font-size:11pt;
    font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
    color: black;

    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    background-color: white;
    padding-top: 0px;
    margin-top: 0px;

}

h1 {  
    font-size: 25pt;
    margin-left:10px;
    margin-bottom:0;
    padding-bottom: 0;
}

a:link, a:visited {
    color: white;
}
a:hover, a:active {
    color: grey;
} 



/*header section rules*/
div.heady {
            height: 200px;
            width: 760px;
            padding: 0;
            background-color: grey;
            background-repeat:no-repeat;
             margin: 0;
 }

a.header {
    text-decoration: none;
 }
 a.header:link, a.header:visited, a.header:active,a.header:hover  {
    color: red;
    margin:0;

 } 

 div.menus {
 padding: 0;
 margin:0;
 background-color:black;
 width: 760px;
 text-align: center;
 font-size:12pt;

 }

 a.list {
 margin:0;
 }

これがjsFiddleへのリンクです。

4

3 に答える 3

3

ブラウザは、デフォルトのスタイルをセラチン要素に適用します。この場合、それulはある程度のマージンを得るということです。div自体にマージンがない場合でも、このマージンによってdivが分離されることに注意してください。

使用する

ul { margin: 0; }

またはリセットスタイルシートを含める

于 2012-05-16T19:43:04.550 に答える
1

Firefox用のFirebugプラグインを使用していますか？まだFirefoxを使用していない場合でも、firebugプラグインと一緒にダウンロードする必要があります。Firebugを使用すると、ソースコード内の要素を調べて、適用されているスタイル、レイアウト（幅/高さ、パディング、マージン）を確認したり、スタイルを操作してCSSの変更がどのように行われるかを確認したりできます。

私はそれを強くお勧めします！

Firefox
をダウンロードFirebugをダウンロード

于 2012-05-16T20:10:47.620 に答える
0 
  .heady { display:block; }
  .heady { margin:0; padding:0; }
  .heady { line-height:100%; /* or even 0 (if no text present) */ }

コンテンツはここでだまされる可能性がありますが、それらの1つまたは3つすべてが、ブラウザー間で獣を飼いならす必要があります。

「cssリセット」のためのグーグルも

于 2012-05-16T19:38:43.570 に答える