2016-11-20 2 views
0

Вот код, где 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> 
+0

вы используете какое-то рамки (начальную загрузку/фундамент и т.д.)? – elicohenator

+0

Спасибо, горит Azeez. Это сработало. –

+0

@ user3595028 вызывают ваши веб-инструменты из любого современного браузера (обычно 'F12'), и вы оцениваете, чтобы увидеть декларацию прикладного стиля на уровне элемента. –

ответ

0

Это из-за заполнения и поля. Просто сделать их нуля, используя ниже кода в CSS:

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

Пространство вы видите, это не от 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>

0

Примените этот стиль к вашим улям

#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' переопределяет оба. –