homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Unwanted vertical spacing under images
verticle spacing padding images

Msg#: 4332126 posted 3:56 pm on Jun 28, 2011 (gmt 0)

Good afternoon!

My query is about how to remove the unwanted verticle spacing from an image. I am using Wordpress.

I have read various articles about removing such a space with the display:block method. However these articles seem to be in the context of an image which is in a table cell. My image is not in a table.

A simplified chunk of my code:

<strong>The legal team</strong></p>
<img class="alignleft" style="float: left; margin-left: 4px; margin-right: 4px; display: block;" title="Andrew Bonell" src="http://www.bonellaw.co.uk/wp-content/uploads/2010/10/andrew-Bonell.jpg" alt="Andrew Bonell" height="226" width="150"></a><strong>Andrew Bonell</strong> grew up and qualified in the Black Country.</p>
<p>Andrew leads Bonell &amp; Co’s non-contentious and property practice..</p>

As you can see I have already attempted the display:block but to no avail.

This is the website where the offending pictures are: [bonellaw.co.uk ]

You'll notice a significant white space above and below the photos which I can't get rid of!

Can you tell me what the code is to get rid of this space, and WHERE it goes in my html. I just want the standard tight wrap that hubspot does.

Thank you for your help!



WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4332126 posted 4:12 pm on Jun 28, 2011 (gmt 0)

Welcome aboard StrangePR, you should install the Firebug extension for Firefox - a right click->Inspect Element on the images shows a 33/20 pixel padding above and below them and points to this selector:

#innercontent img {
margin: 0;
padding: 33px 0 20px;


Msg#: 4332126 posted 4:30 pm on Jun 28, 2011 (gmt 0)


Right. Any ideas how I get to this piece of code on word press?
Obviously by using this program I have issues at getting to the bare bones of the html.
I'm pretty sure this code you found doesnt feature on the html available for me to edit (from that module box at least).


Msg#: 4332126 posted 4:35 pm on Jun 28, 2011 (gmt 0)

I shall write an email to my web designer and see if he can change it for me, or else change the settings on word press so i can get to that bit of code!


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4332126 posted 4:14 pm on Jun 29, 2011 (gmt 0)

Umm, there should be an area right in WordPress where you can directly edit the CSS, if the server is set up with the permissions to write the file. Log in and try Appearance -> Editor, you should see at the top [Site Name]: Stylesheet (style.css) and at the right "Select theme to edit" if it's not the currently active theme (which it should be.)


WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month

Msg#: 4332126 posted 8:39 pm on Jul 13, 2011 (gmt 0)

If you have not managed to take care of this yet, the vertical space under images can be a result of using the media library in WP and its interface. In the html editor for your page, look for the image code:
<img etc follow it along to where you find caption="" and remove that. It adds a frame with a vertical space under images if it is left blank.
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved