Leaving space between image and text

NPStudios

Hey again guys! I'm sure this is a simple fix, but I just want to add a wee bit of room between the text in the passage and an image that has been pushed to the right side.

The only code I'm using is

[>img[femaleprofile]]

To push the image to the right and leave the left side for writing about the image in question. It doesn't leave any room or space between the two though, and I was wondering if there was any css or formatting I could do to fix it!

Thanks kindly!

greyelf

You could use either the CSS margin or padding properties to do what you want.

The following CSS adds a margin to the left of all your images:


img {
margin-left: 2em;
}


If you want to only add a left margin to your right aligned images you can use an attribute based CSS selector:


img[align="right"] {
margin-left: 2em;
}


NPStudios

Edit:  I got it working.  Just had to remove a bracket x3;  Thank you!

greyelf

You needed to add the img based CSS to the end of your existing stylesheet, each CSS selector is self contained and you don't place one within another.

Try the following:


body {
/* This affects the entire page */
background-image: url("http://i.imgur.com/7lFkCif.jpg");
font-family: "Verdana";
font-size: 16px;
}
.passage {
/* This only affects passages */
background-color: rgba(0, 0, 0, 0.9);
border: 2px solid white;
border-radius: 1em;
width: 100%;
margin: 0 5% 0 5%;
padding: 2.5% 0 5% 0;
font-family: "Verdana";
font-size: 16px;

/* Inner margin within the box */
padding: 2em;

/* Text formatting */
color: white;
font-size: 100%;
text-align:justify;
}
.passage a {
/* This affects passage links */
}
.passage a:hover {
/* This affects links while the cursor is over them */
}

#passages img[align="right"] {
margin-left: 2em;
}