Space between elements in html

Consider I have 9 IMG in a html page. They will be rearranged in any number of rows or cells when the viewport of browser changes. What I want is, space between them is 5, but no margin after not at the last row or column.

The margin is not suitable because it gives the last row or column margins too.开发者_StackOverflow

Use the :last-child or :first-child directives in your CSS. For example:

#images
{
  padding-left: 10px;
  padding-right: 10px;
}
#images:last-child, #images:first-child
{
  padding: 0px;
}

If you use PHP or another server-side scripting language to generate the HTML output, you should better assign IDs (or classes) to the first and last elements there instead of using a pseudo-selector.

If you really want to, you could also combine both.

You may write the code for displaying some rows of images with the margin you want, then at the image you don't want margins applied to, you link a class and provide a different style. You can also use the :not pseudoelement.

HTML

<div class="image-margin">
<img src="whatyouwant">
<img src="whatyouwant">
<img src="whatyouwant">
<img src="whatyouwant" class="image-no-margin">
</div>

CSS

.image-no-margin {
margin:0px
}
.image-margin img:not(.image-no-margin) {
0px 5px 5px 0px; //5px top and 5px left
}

This code means that you apply margin 0px to the images with class image-no-margin and the other style you defined (with 5px margin bottom and right) to all the other images (not image-no-margin).

The pseudoelement :not is supported only by Internet Explorer 9+ , latests versions of Firefox, Chrome, Safari and Opera. You can add support for Internet Explorer 6+ by using a javascript library called selectivizer.

You just need to download the library and include it in the head of your webpage:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

.images{
  padding: 0;
  margin: 0;
  border: 0;
}

I know you may have used Firebug and discovered that there is no border, but I had the same problem and adding border: 0; eliminated all spacing completely without having to remove carriage returns from the code.

Hope it helps someone!