| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 3 of 3
Thread: Spacing images
-
Oct 3, 2004, 18:06 #1SitePoint Enthusiast
- Join Date
- Sep 2004
- Location
- Brazil
- Posts
- 91
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Spacing images
Hi,
I´m 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>
-
Oct 3, 2004, 18:20 #2SitePoint Member
- 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:
Second you could add padding to just the top and bottom of each image:Code:img { display: block; padding: 1em; }
Or you could add padding to just the top or bottom of the images:Code:img { display: block; padding: 1em 0; }
Code:img { display: block; padding-top: 1em; }Experiment with each technique to see which works the best for your particular application.Code:img { display: block; padding-bottom: 1em; }Running Man Design - "It pays to run with us."
-
Oct 4, 2004, 06:58 #3The CSS Clinic is open
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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