reset css (img)

Question

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 :))

Madara's Ghost · Accepted Answer · 2014-01-29T20:56:57.450

7

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.

edited Jan 29 '14 at 20:56

answered Feb 29 '12 at 19:23

Madara's Ghost

172,118
50
264
308

I guessed , you are right :) , line-height: 0; removes spaces between above below images , but which property is use for side removing ? – nanobash Feb 29 '12 at 19:27
@Tornike try setting the `font-size: 0px;` No need to set the line-height, this takes care of it. – Malitta N Feb 29 '12 at 19:33
@blackpla9ue thanks, it works , why it is so , can you explain ? :) – nanobash Feb 29 '12 at 19:35
Because if the font-size is 0, that's also the size of the space. I'll add it to my answer. – Madara's Ghost Feb 29 '12 at 19:37
its because of the space left between the `img` tags. It works once you remove the white-spaces between the `img` tags. Try this http://jsfiddle.net/Ktz7d/ – Malitta N Feb 29 '12 at 19:40
@blackpla9ue: I think he meant the `font-size: 0` genius :) – Madara's Ghost Feb 29 '12 at 19:41
1

Not to eliminate anything just write ... in one line :) – nanobash Feb 29 '12 at 19:46

Malitta N · Answer 2 · 2012-02-29T19:24:24.067

1

For a full CSS reset use this instead

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

Then float the image elements

img{
   float: left;
}

edited Feb 29 '12 at 19:24

answered Feb 29 '12 at 19:19

Malitta N

3,384
22
30

I know that, but this doesn't gives any difference – nanobash Feb 29 '12 at 19:20
write another rule for `img` to set `display:block;` or simply float them – Malitta N Feb 29 '12 at 19:25

score 1 · Answer 3 · answered Feb 29 '12 at 19:21

1

Try floating them left. See this example

answered Feb 29 '12 at 19:21

jacktheripper

13,953
12
57
93

How I know it is possible to solve this problem without mentioned, but I can not get it what I have missed in CSS script – nanobash Feb 29 '12 at 19:22

falsarella · Answer 4 · 2014-08-18T23:24:42.580

1

You can put the images contiguous:

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

Or, you can do something (that I don't consider a css reset) to handle:

letter-spacing: -1em;

edited Aug 18 '14 at 23:24

answered Feb 29 '12 at 19:40

falsarella

12,217
9
69
115

reset css (img)

4 Answers4