3

私はCSSを初めて使用するので、簡単な質問があります。

これが私のスクリプトです=>

<!DOCTYPE html>
 <html>
 <head>
 <title>Default</title>
 <meta charset="UTF-8">
 <style type="text/css">
    body,div,html,img
    {
        margin: 0;
        padding: 0;
        border: 0;
    }
  </style>
  </head>
  <body>
      <div>
          <img src="/project/pics/5.jpg" width="240" height="200">
          <img src="/project/pics/10.jpg" width="240" height="200">
          <img src="/project/pics/10.jpg" width="240" height="200">
      </div>
   </body>
 </html>

だから私の質問は、画像間のCSSリセットにもかかわらずスペースであり、それはもちろんレイアウトのスタイリング後にいくつかの問題を引き起こすので、誰もが解決する方法、画像間にスペースがなかったCSSをリセットする方法を知っています、ありがとう...

私は笑を推測しました、それは本当に非常に単純です、ただそれは一行で書かれなければなりません、さもなければそれはfont-size：0と宣言されなければなりません;

皆さんありがとう ：））

4

4 に答える 4

7

発生する理由は、ブラウザが画像間の改行をスペースとして解析するためです。画像はインライン要素であり、空白（または改行）が使用されている場合、画像間に文字通りのスペースがあります。

問題を解消するfloat: left;には、画像上で、または単に改行を排除します（たとえば、タグの間にスペースを入れずに、すべてを同じ行に配置します）。
別の解決策はfont-size: 0;、親に設定してfont-size: 16px;から、要素自体に設定することです。

于 2012-02-29T19:23:00.517 に答える
1

CSSを完全にリセットするには、代わりにこれを使用してください

*{
    margin: 0;
    padding: 0;
    border: 0;
}

次に、画像要素をフロートさせます

img{
   float: left;
}
于 2012-02-29T19:19:02.573 に答える
1

それらを左に浮かせてみてください。この例を参照してください

于 2012-02-29T19:21:04.803 に答える
1

画像を連続して配置できます。

  <div>
      <img src="/project/pics/5.jpg" width="240" height="200" /><img
           src="/project/pics/10.jpg" width="240" height="200" /><img
           src="/project/pics/10.jpg" width="240" height="200" />
  </div>

または、次の処理を行うことができます（cssリセットとは見なされません）。

于 2012-02-29T19:40:48.757 に答える