divにulの余白があります

divにURLを書きますが、なぜそのURLがdivの余白ですか？divにulの余白があります

私のコードは以下の通りです：

#banner { 
 

 
    height:30px; 
 
    width: 750px; 
 
    margin: 0 auto; 
 
    background-color: aquamarine; 
 
} 
 
#banner ul{ 
 

 
    list-style: none; 
 
    height:30px; 
 
} 
 

 
#banner ul li { 
 

 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>title</title> 
 
    <link rel="stylesheet" href="styles/index.css" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <div id="banner"> 
 
    <ul > 
 
     <li>Home</li> 
 
     <li>link</li> 
 
     <li>product</li> 
 
     <li>phone</li> 
 
     <li>cat</li> 
 
     <li>about</li> 
 
    </ul> 
 
    </div> 
 
    </body> 
 
</html>

私はそれらを説明するためにどのように、そこに二つの質問がありますか？あなたが見ている何

出典

2017-05-03 three-blocks

グリーンはデフォルトのulからのパディングで、オレンジはulのデフォルトマージンです。 –

はこれです：

それは、ボックスモデルの視覚的な表現である、Safariはスタイルインスペクタで、あなたにこれを表示します。私は、CSS情報を表示するときにChromeを少し明確にしています。

出典

2017-05-03 12:25:20 Toby

Tobyは、選択した要素の周囲に余白がある場所を示すブラウザを示しています。緑色はパディングです。

なぜなら、ブラウザはhtmlにデフォルトのスタイルを追加するからです。このように考えると、<h1>を追加してブラウザで見ると、スタイルシートを追加していなくても、<h2>より大きく、段落タグよりも大きく表示されます。これは、ブラウザがこれをデフォルトで追加したためです。

すべての種類の要素で同じことが起こります。この場合、順序付けられていないリストが表示されています。ブラウザでは、<ul>の上部と下部に余白が追加され、左側にはいくつかの余白が追加されています。

これはあなたが望むものではない場合、あなたはすでにその要素のスタイルを持っている同じ場所に、独自のスタイルでそれを上書きすることができます：あなたはブラウザのすべてを削除したい場合は

#banner ul{ 
    list-style: none; 
    height:30px; 
    margin: 0; // removes the default margin 
    padding: 0; // removes the default padding 
}

あなたが新鮮なスレートを望んでいたので、デフォルトのスタイルを使用すると、 'css reset'を追加することができました。人気のあるものは、Eric Meyers、https://meyerweb.com/eric/tools/css/reset/です。これは必要ではない場合があります。この場合、通常の順序リストが必要な場合は、list-stylesを追加する必要があります。

出典

2017-05-03 12:34:11

緑の色は、デフォルトのパディングです。

#banner ul{ 
    padding: 0; 
    list-style: none; 
    height:30px; 
}

出典

2017-05-03 12:34:52 KHUSHBOO

オレンジ色：あなたが#banner UL

マージンで設定30px：これは、あなたが緑の色が、その後padding:0;

#banner ulにあなたのコードは次のようであるかもしれない追加することを削除したい場合は標準のulパディング。削除したい場合：

#banner ul{ 

    list-style: none; 
    height:30px; 
    padding-left:0px; 
}

出典

2017-05-03 12:35:22 Storm1337

divにulの余白があります

答えて

関連する問題