2016-11-20 11 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最近のブラウザーからWebツールを呼び出すと(通常は '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

あなたの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'は両方ともオーバーライドされています。 –

関連する問題