Space between elements in html

Question

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.

You have to add a class to the last image to overwrite the margin. This will work cross-browser. — Shef
– Shef, Commented Aug 21, 2011 at 11:10

ComFreek · Accepted Answer · 2013-01-05 18:18:58Z

2

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.

edited Jan 5, 2013 at 18:18

answered Aug 21, 2011 at 11:10

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ComFreek Over a year ago

But it's supported in the major browsers: w3schools.com/cssref/sel_firstchild.asp

feeela Over a year ago

@user603003 No, it isn't: reference.sitepoint.com/css/… (Though it's the most standards-conform solution)

Shef Over a year ago

@user603003 If w3schoolzzz are the answer to life the universe and everything, then yes it is supported. ;)

Ali Over a year ago

That won't work. consider having 3 rows, 3 cols. 3 img at the last row must not have bottom margin. And 3 img of last col must not have right margin. It get worse when the viewport changes. Maybe 2 cols and 5 rows which last row only have one element. This way nth element won't work either.

ComFreek Over a year ago

@Ali: Yes, I realized that after posting ;) But is there any way to do that in CSS?

|

Fabio · Accepted Answer · 2013-01-05 18:03:44Z

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

jcjr · Accepted Answer · 2013-01-05 18:11:00Z

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

Collectives™ on Stack Overflow

Space between elements in html

3 Answers 3

9 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Related