2016-11-20 207 views
0

以下是填充右側和填充底部爲0但填充左側和填充頂部正在獲取空間的代碼。如何讓他們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> 
+0

您正在使用某種形式的框架(引導/粉底等)? – elicohenator

+0

謝謝阿澤茲。有效。 –

+0

@ user3595028從任何現代瀏覽器(通常爲「F12」)調用您的網絡工具,並評估以在元素級別查看應用的樣式聲明。 –

回答

0

這是因爲填充和保證金。只是讓他們爲零,你的CSS使用下面的代碼:

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

你所看到的空間是不是從div元素。

這可能是從保證金/填充無論從bodyul元素。

嘗試這樣:

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>

0

應用這種風格到您的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>

+0

不應該是必要的。這些樣式應該被來自任何來自'ul'的聲明覆蓋。像內聯,樣式塊,href文件.. –

+0

我剛纔在這個例子中提到過。它知道這將被任何外部樣式表覆蓋,在這種情況下,我們需要通過專門添加類來增加css的權重。 – Nitheesh

+0

您不需要添加類。聲明優先級的最佳方法是從根元素指定它。 'div> ul'覆蓋'ul {}',不管它是否先指定。 'body div> ul'覆蓋了兩個.. –