How to create a single space in css between a sentence and a photo on my wordpress site?


Tags: css,spacing

Problem :

How do I create a single space in css between a sentence and a photo on my wordpress site? I tried wrapping my sentence with the following code: <span style="font-size: 0.8em; line-height: 75%;">blahblahblah</span> but this did not do work.

Edit: My apologies for the late response. I am just trying to include a Flickr link at the bottom of my photo to attribute/credit the photographer - but I would like to have a single space between the photo and the attribute/credit link. Below is the code for what I currently have at the top of my blog post:

<img class="size-full wp-image-68 alignnone" title="What Causes Eczema" src="http://eczemafreedomacademy.com/wp-content/uploads/2012/04/what_causes_eczema.jpg" alt="What Causes Eczema" width="500" height="500" /><span style="font-size: 0.8em;">(Photo: <a href="http://www.flickr.com/photos/helga/3952984450/" target="_blank">Helga Weber</a>)</span>

Thank you in advance.



Solution :

Not sure I fully understand what you are trying to accomplish without seeing your HTML, but assuming the simplest case this should work.

First ad an id attribute to your image tag. It can by any id value as long as it doesn't duplicate the id of another element and matches what you have in the style code.

<img id="yourImageID"....>

Add a style element to your document (usually inside the head element), or add this CSS markup to an existing style element. You can also insert the inner part into any CSS file linked to by your document. Read this article for more on where to put this.

#yourImageID {
    margin: 1em;
}

BTW: It is generally not a good practice to put styles inline on your elements. Put them in a separate <style> element in your document.


    CSS Howto..

    How to check if the flash message set is empty in cakephp

    How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

    How to change css dynamic by javascript

    How do I force an image to be responsive using CSS so it stays in the same position?

    How does Wired magazine achieve this thick underline link effect?

    how to set CSS border-left outside of box

    How to make a floating page div responsive

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to get the actual rendered font when it's not defined in CSS?

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    How can I get the font size of an element as it was set by css

    How to align radio buttons inside a DIV?

    CSS: Is there a limit on how many classes an HTML element can have?

    how to create a QT plugin using Meego Touch Framework?

    How to apply a css class for jqGrid height property setGridHeight?

    how to encode .css file?

    background image not showing on nested

    How to make a webpage look like a popup? [closed]

    How to use conditional CSS In CakePHP 2.x?

    How to link another page using button? [closed]

    Android Crosswalk Project: How to use css?

    How can you hide the arrow that is displayed by default on the HTML5
    element in Chrome?

    How to achieve no outside margins for floats in a div

    How can I set a google-font as default-font in CKEditor?

    How to use list tag in single line

    How to set css @media print styling with jquery

    How do I get the name of div a user must click to appear in a text div?

    How to edit the element.style css?

    how to rotate text with css? transform is not supported by current schema?