csshtmlimagecss-reset

reset css (img)

I am new in CSS so have a simple question.

here is my script =>

<!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>

So my question is that , despite of CSS reset between images are spaces, which of course cause some problems after styling layout, so anyone knows how to solve , how to reset CSS that there were not any spaces between images, Thanks ...

I guessed lol, it is really very simple , just it must be written in one line , otherwise it must be declared font-size: 0;

Thanks all :))

Solution

  • The reason that happens is that the browser parses the linebreaks between images as spaces. Images are inline elements, and will have a literal space between them when a whitespace (or a linebreak) is used.

    To eliminate the problem, either float: left; on the images, or simply eliminate the line breaks (as in, put them all on the same line, with no spaces between the tags).
    Another solution is to set font-size: 0; on the parent, and then font-size: 16px; on the elements themselves.