Vertical spacing between images?

HTML & CSS
1

If you have many images in a vertical column and you want a certain exact space in between each one, what’s the best, leanest way to do it please ?

Any help appreciated.

Dez.

2

Hm, well first I’d prolly want to make sure I wasn’t getting “descender space” in some browsers… so my images would either be set to display block (or some kind of block context) OR vertical-align: bottom to remove that (sometimes you only see it in some browsers for some reason).

Then, prolly a bottom margin. Seems more stable cross-browser than a top margin.

This is all my idea without looking at any code… your specific situation might do better with a different idea.

3

The object is an inline replaced element just as the img element is. Either set the vertical-align to bottom, or set display to block.

cheers,

gary

4

Thanks Gary - all solved.

5

Also, how do you code it, when the images in the vertical column are not all img’s ? if you have some swf’s for example ?

The helps appreciated.

Dez

6

Thanks - it’s appreciated.

I always thought the syntax in the css sheet for divs started with a # and a class started with a .

? ?

7

Why the block part ?

Images, even though they look kinda blocky, are actually inline elements by default. If you just throw a bunch f images up on a page, they’ll sit next to each other as if they were floated (like inlines normally do). So, block for one thing removes the descender space (text has room for dangly letters and so do images!) AND it make a newline (so you don’t need <br>s).

Also, why is the thead and tbody important ? I’ve never bothered before, and they’ve always displayed ok ?

It’s not for display, it’s just table semantics. A Good Table has certain things… just like a Good Form has labels even though it can display ok with just loose text floating around. If you have a data table, then the headers show what each side and each column head represent.

View source That’s about what tables should look like, code wise.

If they don’t make sense with your data, then you likely shouldn’t be using a table anyway.

8

Thanks for that, will give it a go.

Why the block part ?

.something img {
display: block;
margin-bottom: something;
}

Also, why is the thead and tbody important ? I’ve never bothered before, and they’ve always displayed ok ?

9

Many thanks - the structure would be something like :

<table border=“1” width=“100%” id=“table1”>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
image
image
image
image
image
image
image
image
image
image
image
image
image
image
</td>
</tr>
</table>

10

Hm. Yeah, a display: block and then a bottom margin should do it.

Now I’m required by law to ask what’s up with the table with the border=“1” width=“100%” stuff : )

11

Well, I dunno what your page is, BUT if it’s just a list of images making a column, you could just

<div class=“something”> (or something, assuming you’ll have more than one of these columns)
image
image
image
image
image…
</div>

.something img {
display: block;
margin-bottom: something;
}

The images are who gets the block setup in this scenario.

Of course, if this really is part of some tabular data, then a table is fine, but then do a proper one: with thead and table headers and all that.

12

Aaaaah, ok, :slight_smile: How exactly would you code it please ? Does the block part go in the css ? Would a div of some sorts be ok ?
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
image
image
image
image
image
image
image
image
image
image
image
image
image
image
</td>
</tr>
</table>