Removing Horizontal and Vertical space from Images...

Question

_{Monday, September 5, 2011 4:12 PM}

Hi,

This is a really simple question and after browsing through over 20 Bing search pages I still cannot find an answer.

I'm simply trying to make two images flush against each other without any white space. The horizontal and vertical spacing fields are grayed out, I tried border="0", margin="0" but nothing works. I assume it's some custom CSS which I can add with a CEWP but I don't know the CSS ID or the required code.

Can anyone please tell me how to remove the white space surrounding images inserted into a SharePoint 2010 wiki page?

Many thanks in advance,

Dave

All replies (5)

_{Tuesday, September 6, 2011 2:01 PM ✅Answered}

For vertical stacking, here's a working snippet:
<img src="/sites/team/SiteAssets/SitePages/Home/image1.jpg" alt="" style="vertical-align: bottom"/><br/><img src="/sites/team/SiteAssets/SitePages/Home/image2.jpg" alt="" style="vertical-align: top"/>
AK

_{Monday, September 5, 2011 5:06 PM}

If you are in edit mode, you can just insert the first image, click right next to it and insert the second one. There will be 10 pixels between them by default and if you click the first one and click Design on picture tools tab, you should be able to set Horizontal Space to zero and then same for the second one. Make sure you did not pick a style and the position is inline.
If this still doesn't work, go to editing tools, format text, edit html source (under markup) and set the style inline.
AK

_{Tuesday, September 6, 2011 8:29 AM}

Hi AK,

Thank you for your answer, as stated in my original message unforutunately the horizontal and vertical spacing options are grayed out, please can you advise how to set the style inline?

Thank you very much for your support.

Dave

_{Tuesday, September 6, 2011 9:24 AM}

My test was done on SP1 - can't test with RTM or you probably had the rich editor customized. Anyway, when you edit the source, the images look like this (path is specific, of course):
<img src="/sites/team/SiteAssets/SitePages/Home/image1.jpg" alt="" style="margin: 5px"/><img src="/sites/team/SiteAssets/SitePages/Home/image2.jpg" alt="" style="margin: 5px"/>
which I replaced by
<img src="/sites/team/SiteAssets/SitePages/Home/image1.jpg" alt="" style="margin-right: 0px"/><img src="/sites/team/SiteAssets/SitePages/Home/image2.jpg" alt="" style="margin-left: 0px"/>
and saved. Notice that I removed the right side space from the first image and the left side space from 2nd image so they have zero separation. You can adjust the other sides if needed.
Hope this works.
AK

_{Tuesday, September 6, 2011 12:46 PM}

Hi AK,

Unfortunately that didn't work, the problem is with the vertical spacing as opposed to the horizontal spacing, therefore left and right margins do not apply. I do have a left and right spacing issue but I can live with that, I tried adding left and right margins at 0px but it made no difference. I have included a screenshot this time so you can see what I mean, the problem is the space between the blue horizontal line and the picture of the woman.

I have fixed width custom CSS in a CEWP on the page and also some CSS to center the ribbon, do you think this might affect why I can't access the horizontal and vertical spacing options? I have marked the problem areas with red arrows.

Thanks,

Dave