Line Spacing/Breaks Between Images

  • kissmyspatula · Member ·

    Is there a way to customize the line spacing (or breaks) between between images?

    I’m trying to reduce the line spacing between images. WordPress adds a standard line break whenever I upload an image.

    The blog I need help with is: (visible only to logged in users)

  • starsquid · Member ·

    Yes there iiiiis…! Though there may be a smarter way using coding, I use small blank images of various sizes to squeeze space, divide and separate images to where I want them to be. Also (after viewing your gorgeous food photos on your page, you might wanna cut down on the contrast slider though), if you have multiple images grouped together (any number, 2, 3, 4 or more) arrange them how you want them in your favorite graphic app with white space and all, and upload the whole thing (ofcourse you don’t want a too large image, so split them up if you have like 10 images at once for instance.

    Take a look at my post: http://chokochoko.wordpress.com/2010/02/20/issue-5-study-tips/
    Some images include white space in the image itself.

    I know its not the conventional way (code-wizards will shoot me), but it works!

  • 1tess · Moderator Emeritus ·

    @starsquid

    Hey! ‘Code-wizards’ can have open minds! っ ;D

    You can also set the margins around images with visual editor or coding (horizontal space / vertical space).
    Or use tables.

    But this question is posted in the CSS forum so I believe the original poster is looking for advice about changes theme-wide. I don’t know anything about CSS.

  • 1tess · Moderator Emeritus ·

    @kissmyspatula
    If you are not just asking about CSS, then you might be interested to know that you can set negative numbers in margins (or in the horizontal / vertical of the advanced settings in the visual editor).

    In some themes which automatically add space around images, the effect will be to eliminate the white space. In other themes, or with large enough negative numbers (or are negative number getting smaller and smaller from -1?) the pictures will overlap.

  • starsquid · Member ·

    Yea, well you’re with stupid, Im not that handy with coding ya know ;)
    I need something Quarkxpress-ish hehe.

    Oh no, Im done with the visual editor, always messes up things. Although Im a coding noob, I prefer to stick with the HTML-editor, at least it cant go wrong then. Did you know if for example you use certain lines like:

    <font size=”-2″><i>some text</i></font>

    To have smaller text and then switch to visual editor (which screws it up and its normal sized again) and switch back to html editor, it comes back as:

    some text

    See what I mean? Visual editor = no no

  • starsquid · Member ·

    dang, it doesnt even show the line, it comes back as:

    < em > some text < / em >

  • 1tess · Moderator Emeritus ·

    @starsquid

    Oh, I’m with you about the visual editor. It messes up lots and lots of things. But some people are just too frightened of html, or like you, inexperienced. So for most straightforward things it works satisfactorily for most bloggers. That’s why I present the option when I answer questions here in the forums.

    I’m sure you are intelligent enough to learn it (certainly less complicated than Japanese LOL) but you have found ingenious ways to make things work.

  • kissmyspatula · Member ·

    @1tess yes, i’m seeking a fix theme-wide

  • starsquid · Member ·

    inexperienced??! I know like…err…at least 10 different lines of codes!!

    You want me to put things in italics?! < em > < /em > is what I say

    A line break? < br / > at the top of my head! Just like that! Woo-ed you now huh didn’t I?

    I got me some mad HTML skills, telling ya! (ok I did copy them from my notepad file) :P

    As for the ‘ingenious ways’, if you can’t code it, fake it!

  • devblog · Member ·

    As for the ‘ingenious ways’, if you can’t code it, fake it!

    :D

    You may not have the coding experience, but you’ve got some serious photography skills. I wish I had a tenth of those skills.

    kissmyspatula,

    It seems you’ve pasted the whole CSS in your CSS Editor. Just FYI, that’s not a good idea. In the CSS Editor you should only have your changes/additions to the CSS.

    Having said that, find the following selectors:

    .entry img {
background:url('img/shadow.gif') no-repeat right bottom;
border:none;
border-top:none;
border-left:none;
padding:none;
}

.entry a img {
border:none;
background:url('img/shadow.gif') no-repeat right bottom;
border-top:none;
border-left:none;
padding:none;
}

    And replace them with this one:

    .entry img, .entry a img {
border: none;
padding: 0;
margin: 0 0 5px;
}

    That should do what you want, plus it takes care of some unused properties. You can play with the “5px” value of the “margin” property to fit your needs.

    ~

  • kissmyspatula · Member ·

    devblog! i was crossing my fingers i’d see you today!

    okay, i will give this a try now.

    (i haven’t pasted the entire CSS into my editor – i swear, i didn’t, though i know there are bits which duplicate).

  • starsquid · Member ·

    Thanks devblog, wish I had some REAL coding skills and I could built my dream blog! (ok that sounded corny)

  • kissmyspatula · Member ·

    @devblog thank you, thank you, thank you. you are my hero. (yet again).

  • 1tess · Moderator Emeritus ·

    @starsquid
    Seriously, I can only imagine what an amazing blog you would have! :D

  • kissmyspatula · Member ·

    @devblog – just realized doing this takes away the center styling of the images. how do i put that back in?

  • devblog · Member ·

    I’m sorry for overlooking that. Please use this code instead:

    .entry img, .entry a img {
border: none;
padding: 0;
margin: 0 auto 5px;
}

    This will do the same thing my previous code does plus it’ll center the images.

  • kissmyspatula · Member ·

    @devblog – excellent! thank u again…and again! :)

  • The topic ‘Line Spacing/Breaks Between Images’ is closed to new replies.