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 & Co’s non-contentious and property practice..</p>
As you can see I have already attempted the display:block but to no avail.
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:
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).
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.)
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.