div有ul的余量

thr*_*cks 0 html css

我在div中写了一个url,但为什么url是div的右边距?

在此输入图像描述

我的代码如下:

#banner {

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

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

#banner ul li {

    float: left;
}
Run Code Online (Sandbox Code Playgroud)
<!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>
Run Code Online (Sandbox Code Playgroud)

我有两个问题,如何解释?

Tob*_*oby 5

你看到的是这个:

在此输入图像描述

它是盒子模型的直观表示,Safari将在样式检查器中向您显示.在显示CSS信息时,我发现Chrome更清晰一些.