Skip navigation
Currently Being Moderated

adding gaps between images

Jun 20, 2013 2:11 AM

Hello Dreamweavers.

 

I have adding 5 images which are thumbnails  in my div tag, and because they were all stuck next to one another I created a class css style of the following:

 

 

.space_me_out {

          padding: 10px;

}

 

and then applied it to the 5 thumbails in my Div tag, they all have a nice gap of 10pixles. So my questions is, what it a right method of doing so?by making a class style with padding?

is this the correct method?

 

thank you.

 
Replies
  • Currently Being Moderated
    Jun 20, 2013 2:52 AM   in reply to inquestflash

    The way you're doing is not "wrong" per se, however your class is not semantic.

     

    I would do:

    .thumb {

         padding: 10px;

    }

    Or better:

    .thumbnails > img {

         padding: 10px;

    }

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 3:43 AM   in reply to inquestflash

    I thought we can name them anyway we want to.

     

    You can. But why not take the opportunity to name them in a way that is semantically meaningful?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 4:59 AM   in reply to inquestflash

    There is a big difference in semantic class and non-semantic (e.g. style based) class.

     

    Let's say one is .thumb and the other is .space_me_out. Both creates 10px padding around thumbnail images.

     

    Later you need to add a border around thumbnail images. If you're using semantic class, you'd just add a border property to .thumb. If you're using non-semantic class, you'd need to create a new class  .border_around_me and add that to all thumbnail images. Not elegant

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 5:05 AM   in reply to kennethkawamoto2

    Unless, of course, you were OK with adding the border to .space_me_out!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 5:36 AM   in reply to MurraySummers

    Yes - however the border is nothing to do with being spaced out so that now the class name does not even represent the style.

     

    A better example would be something like <span class="red"> vs <span class="author">. Now I want to change the author name to blue...

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 5:43 AM   in reply to kennethkawamoto2

    Just pulling your chain. Kenneth is exactly right - your class names should be chosen not by the function of the rule but by the element on the page. The meaning of Kenneth's suggestion is that if later you decide you want the thumbnail containers to have some additional property, you can add it to the rule you already have for the thumbnail containers without changing the *semantic* meaning of the selector. It still applies to thumbnails.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points