2 IMGs need to be separated (one on top of the other) with a 35px-MARGIN between them

[semicolon]

I can't remember if I have to put an IMG into a separate DIV (or TABLE) to force two IMGs onto their own lines vertically (to stack, in other words). I've tried adding

<img style="margin-top: 35PX; BORDER: 4PX DASHED BLACK;" src="http

to the second IMG but the two are still on the same line. Did I have to float this? What's the simplest way to add a TOP MARGIN (not padding) to an IMG? Thanks guys!

s

[semicolon]

<br> ?? that seems so primitive!

[ralph.m]

What about

img {display: block;}

That often works, but not in all contexts.

[semicolon]

Well I finally just fell back on my old tried-n-true DIV

<div style="margin-top: 35PX;">

It works; I'm just not sure that I couldn't have done this within the IMG tag itself.

s

[ronpat]

Maybe:

img {
    display:block;
    margin-top:35px;
}

or

img {display:block;}
img + img {margin-top:35px;}

[semicolon]

So . . . Ronpat and Ralph, how would you recommend a "TOP 35px" class that would globally work for

• TABLES
• IMAGES
• DIVs

[ronpat]

A class implies properties that are selectively applied. Your question is a bit too vague to answer "globally". Are you asking how to apply a margin-top to all tables, images, and divs? or are you asking for a class that can be selectively applied to any table, image and/or div?

[Paul O'B]

So . . . Ronpat and Ralph, how would you recommend a "TOP 35px" class that would globally work for

• TABLES
• IMAGES
• DIVs

You can't really make blanket assumptions like that as margins collapse or will at least depend on the margin of the element above also.

If the element above has a greater margin that 35px then the gap will be greater than 35px or if the element above has a negative bottom margin the gap will be less.

If the elements are floated then the margins won't collapse and you get double the margin you thought as margins on floats don't collapse.

If the elements are nested then the margin will collapse onto the outer element if there is no content, borders or padding between them.

If you apply a 35px top margin to an element it will have no affect if the element above it is a float.

Vertical margins on inline elements are ignored.

So as you can see you can't really have a one size fits all rule as it all depends on context. If you are just talking about static non floated, non positioned divs then just adding a margin-bottom is fine but at some point you will run into one or other of the scenarios mentioned above and have code more specifically to the task in hand.

It is unlikely that you would want all divs, images and tables to have the same margin. However you may want to set a default for elements like paragraphs and headings. (e.g. p{margin:0 0 1em})

[semicolon]

A class implies properties that are selectively applied. Your question is a bit too vague to answer "globally". Are you asking how to apply a margin-top to all tables, images, and divs? or are you asking for a class that can be selectively applied to any table, image and/or div?

Selectively applied. Thanks RonPat.

s

[semicolon]

Sorry to be so confusing!! Just ignore that "globally" stuff above. Selectively is actually what I'm after.

[Paul O'B]

Just add a class to the 2 images concerned and then set the image to display:block and add the top margin you need.

.gap{
display:block;
margin:35px 0 0;
}

Of course it depends on what other more specific rules you may have in place as the above may get over-written by rules with more weight.