Question

这里的代码是padding-right和padding-bottom为0但是padding-left和padding-top正在获得空间。如何让他们0？

<style type="text/css">
    #container{
         width:800px; 
         text-align: center;
         height:600px;
         margin:0 auto;
         border:1px solid black;
         overflow: hidden;
         padding: 0px; 
        }
         li{
            width: 800px;
            height: 600px;
            list-style: none;
         }
</style>
<body>
    <div id="container">
        <ul>
            <li><img src="1.jpg" width="800px" height="600px" ></li>


        </ul>
    </div>
</body>

Answer 1

这是因为填充和边距来自。只需使用css中的以下代码将它们设为零：

ul { padding:0px; margin:0px; }

Answer 2

您看到的空间不是来自div元素。

可能来自body或ul元素的边距/填充。

尝试这样的事情：

body {
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

<div id="container">
  <ul>
    <li>
      <img src="http://placehold.it/350x150">
    </li>
  </ul>
</div>

Answer 3

将此样式应用于ul

#container ul {
    -webkit-padding-start: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

我认为这会解决您的问题。我附上了一个示例代码段。

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        #container {
            width: 800px;
            text-align: center;
            height: 600px;
            margin: 0 auto;
            border: 1px solid black;
            overflow: hidden;
            padding: 0px;
        }
        
        li {
            width: 800px;
            height: 600px;
            list-style: none;
        }
        
        #container ul {
            -webkit-padding-start: 0;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
        }
    </style>
</head>

<body>
    <div id="container">
        <ul>
            <li><img src="1.jpg" width="800px" height="600px"></li>
        </ul>
    </div>
</body>

</html>

填充不起作用

3 个答案: