Image Block: 5px gap appearing below image

Permalink
I have searched the forums but have had no luck.

When I insert an image using the 'Image Block' I get a small 5px space below the inserted image. I have attached a file to show my issue.

How am I able to get rid of this space? The padding and margins are set to zero.

Many thanks!

1 Attachment

View Replies: View Best Answer
JohntheFish replied on at Permalink Reply
JohntheFish
I would guess that maybe your theme adds css for margin, padding or borders about the images, or about the blocks that contain the images.

If you look at your site in chrome, right click on an image and select "inspect element", the developer window will appear with an analysis of the styles down the right hand side showing how they are applied to the image.
beebs93 replied on at Permalink Best Answer Reply
beebs93
If John's suggestion doesn't yield anything, perhaps adding display:block to the images?

I know some versions of IE add a mysterious gap unless their CSS is set as such, but others usually play nice.

If there's access to the site, a link to it would solve the problem a lot quicker :)
ceanndesign replied on at Permalink Reply
Thanks to both John and beebs93, I really appreciate your reply.

@beebs93... I added display:block to the images as you suggested and it fixed the my issue.

Thanks again for your help.
designsforchange replied on at Permalink Reply
designsforchange
Hi there,

I am having the same issue that you responded to with a fix. Could you please explain to me where you would "adding display:block to the images".

I'm not a newbie at C5 but I'm not bridging the gap on where to solve this.

Thank you for your help.

Cheers
ceanndesign replied on at Permalink Reply
@designsforchange
It has been a while since the issue above - however I'm pretty sure I added 'display: block;' to the css style.
designsforchange replied on at Permalink Reply
designsforchange
Hey there,

Thank you for the quick reply :) Sorry adding ‘display:block;’ to my theme css ? Or somewhere within the concrete/blocks ?
ceanndesign replied on at Permalink Reply
No problem. Yep, try adding the 'display: block;' to your main theme .css file. I'm pretty sure that was the solution... sorry again, as it has been a while.
.img {
display: block;
}
designsforchange replied on at Permalink Reply
designsforchange
Hi ceanndesign,

That did solve the issue of the gap in the border, but it also put all of my horizontal social icons that were at the top right in a stack into a vertical line on the top left? Ah!
jasteele123 replied on at Permalink Reply
jasteele123
Use John's suggestion using Chrome above, and you can probably apply display:inline to the CSS contained within the social icons div.

Again, links to actual sites makes this much faster to help.
designsforchange replied on at Permalink Reply
designsforchange
Thanks jasteele123, will give it a shot. I am building the site locally so there is no link for anyone to view.
jasteele123 replied on at Permalink Reply
jasteele123
Save as webpage complete, upload to any server. Should get you the html, css and javascript ;)
designsforchange replied on at Permalink Reply
designsforchange
So because the images will link to another page, I added this to a img. instead of to the image block design. Thanks to everyone for their help. Cheers

a img {
   border-width:3px;
   border-color: #edd9c7;
}
Pluto replied on at Permalink Reply
Pluto
Thanks john. this worked for me.