3

ページのマージントップを削除したい。スクリーンショットで私が何を意味するかをお見せしますここに画像の説明を入力

私の写真には、私の問題を示す赤い矢印があることがわかります。このマージンを削除するにはどうすればよいですか? ここに私のcssを投稿します：

div#header {
    background-color: #6495ED;
    background: -moz-linear-gradient(100% 100% 90deg, black, gray);
    background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
    margin: 0px;
    width: 100%;
}
body {
    background-color: #000000;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
h1 {
    text-align: center;
    color: #FFFFFF;
    font-family:  sans-serif;
    font-size: 26px;
    font-weight: bold;
    padding: 5px;
}
ul {
    list-style-type: none;
    padding: 5px;
}

li {
    color: #FFFFFF;
    font-family: sans-serif;
}

p {
    color: #FFFFFF;
    font-family: sans-serif;
    padding: 5px;
}
a {
    text-decoration: none;
    color: #FFFFFF;
}

ヘッダーのすぐ上にあるこのマージンを削除する方法について何か提案はありますか?

ここに私のhtmlを見ることができます：

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>  
        <title>Lista coupon</title>
        <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="../js/memoria.js"          type="text/javascript"></script>
        <style  src="../css/style.css"          type="text/css"></style>
    </head>
    <body onload="loadJson();">
        <div id="header">
            <h1>Lista coupon salvati</h1>
        </div>
        <div id="content">
            <p>Di seguito trovi tutte le promozioni salvate</p>
            <div id="list">
            </div>          
        </div>
        <div id="footer">

        </div>
    </body>
</html>
4

6 に答える 6

3

html要素のパディングとマージンも削除してみてください（ だけでなくbody）

h1また、すべてのブラウザによって再定義/リセットされておらず、おそらく要素の上に折りたたま#headerれている要素に適用されるデフォルトのマージンを（異なる方法で）削除してみてください

html {
   margin: 0; 
   padding: 0;
}

h1 {
   ...
   margin: 0;  
}
于 2013-07-30T12:49:02.727 に答える
1

どのブラウザで発生しているのかはわかりません。

Firebug とそのツールを使用すると、スペースの原因を特定してそれをゼロに設定できるはずですが、Meyers http://meyerweb.com/などのリセット css スクリプトを使用するのが「チート」です。 eric/tools/css/reset/を使用して、ブラウザーの不整合をすべてクリーンアップします。

于 2013-07-30T12:48:09.957 に答える
0

これを行うために私が見つけた最良の方法は、css の:first-child疑似要素を<h1> or <ul>body 要素内の etc などの最初の要素に追加することです。

したがって、上記のマークアップを使用した例は次のようになります

h1:first-child { margin-top: 0; }

これにより、コード内のその他のすべての要素に干渉することがなくなり<h1>、HTML マークアップに不要な css クラスが追加されることもありません。

提供された回答にほとんど運がなく、サムの問題を抱えていたので、これが役立つことを願っています。

于 2016-07-28T13:15:27.277 に答える