5

サイトの作成を開始したばかりですが、左側全体に数ピクセルの余白があり、その理由がわかりません。

http://jsbin.com/elufob/1/

どんなアドバイスでも大歓迎です

CSS

    html{
    min-width: 100%;
    background-color: #add8e6;
}

.navBar{
    text-align: center;
    background-image: linear-gradient(to bottom, #666666 0%, #000000 60%);
    color: white;
    border-bottom:solid 1px #666;
    top:0;
    height:30px;
    position:fixed;
    width:100%;
    z-index:1000;
}

.leftDiv{
    clear: left;
    text-align: left;
    background-color: blue;
    float: left;
    max-width: 26%;
    display: inline-block;
    margin-right:2%;
    margin-left: 0%;
    margin-top: 2%;
    border: black;
    border-width: 5px;
    border-style: double;
    border-radius: 5px;
}

.middleDiv{
    text-align: center;
    background-color: green;
    max-width: 70%;
    float: right;
    display: inline-block;
    margin-top: 2%;
    MARGIN-BOTTOM: 1%;
    border-style: solid;
    border: black;
    border-width: 5px;
    border-style: double;
    border-radius: 5px;
}

.pageContainer{
    width: 100%;
    min-height: 100%;
    min-width: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}

.footer{
    background-image: linear-gradient(to bottom, #666666 0%, #000000 60%);
    color: white;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
}

そしてHTML

<html>
<link rel="stylesheet" href="psWebCss">

<header class=navBar>
    <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
    <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
    <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
    <a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>


</header>    
<body>
<div class="pageContainer">    
    <div class="leftDiv">          
    </div>   
    <div class="middleDiv"> 
    </div>
</div>
<div class="footer">
   Footer Text
</div>
</body>





</html>
4

6 に答える 6

5

ボディタグはmargin: 8px;cssに追加するだけです

body {
    margin: 0;
}
于 2013-05-15T13:19:55.047 に答える
2

これはそれを修正します..

body{
margin:0;
padding:0;
}

これを css ファイルに配置します。

スタイルシートのリセットを使用して（まだ使用していない場合）、デフォルトのブラウザ スタイルを上書きすると、問題が発生する可能性があります。

これは良いものです - http://meyerweb.com/eric/tools/css/reset/

于 2013-05-15T13:23:54.603 に答える
1

不等マージンとパディングのデフォルト セットが 0 になるように、常に次の 2 行を追加します。

* {
    margin:0px;
    padding:0px;
}
于 2016-07-14T08:26:06.117 に答える
1

ボディには 8px の余白があります。

マージンを 0px に設定すると、ゴールデンになります

body {
  margin: 0px;
}
于 2013-05-15T13:19:56.167 に答える