| SitePoint Sponsor |
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>
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."
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
Posting Permissions
Bookmarks