SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Spacing images
-
Oct 3, 2004, 18:06 #1
- 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 #2
- 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; }
Code:img { display: block; padding: 1em 0; }
Code:img { display: block; padding-top: 1em; }
Code:img { display: block; padding-bottom: 1em; }
Running Man Design - "It pays to run with us."
-
Oct 4, 2004, 06:58 #3
- 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