SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Spacing images

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing images

    Hi,

    Im trying to display images using the "display: block" command, but I was wondering if theres a way to space 'em using css, something like line-height, so the images do not stay too close to one another.


    Thanks!

    <style type="text/css">

    img { display: block; }

    </style>
    </head>

    <body>
    <img src="Assets/c1.gif">
    <img src="Assets/c2.gif">
    <img src="Assets/c3.gif">
    <img src="Assets/c4.gif">
    </body>
    </html>

  2. #2
    SitePoint Member dikspence's Avatar
    Join Date
    Jun 2003
    Location
    Edmonton, Alberta, Canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    All that you need to do is add some padding around the images. You can do this a number of ways. First you could add padding all the way around the images:

    Code:
    img {
     display: block;
     padding: 1em;
     }
    Second you could add padding to just the top and bottom of each image:

    Code:
    img {
     display: block;
     padding: 1em 0;
     }
    Or you could add padding to just the top or bottom of the images:

    Code:
    img {
     display: block;
     padding-top: 1em;
     }
    Code:
    img {
     display: block;
     padding-bottom: 1em;
     }
    Experiment with each technique to see which works the best for your particular application.
    Running Man Design - "It pays to run with us."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Although dikspence's information is 100% correct you might like to know that ie5 and ie5.5. and ie6 in quirks mode won't recognise padding on images.

    You can substitute margin for padding and get the same spacing effect you require. (What you can't do however is apply padding and borders to images in the above mentioned browsers. For that you'd need to use another div to hold the padding and border.)

    Hoped that helps

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •