How To Creat Spacings In Posts?

  • Navie

    (@navie)


    14 years, 8 months ago

    Adding this between photos or text used to work for me,

    <p align="center">&nbsp;</p>

    or this if I want a bigger spacing,

    <br />

    But since going from WP 2.4 to the latest 2.8.4 it doesn’t seem to work anymore, I could not space pics or text with an empty space/line in between to make things look less cluttered…

    I tried the following for a pic but it still does not work..

    <p style="text-align: center;"><a href="picsource.jpg"><img class="aligncenter" style="margin: 0px auto 10px; display: block; width: 500px; text-align: center;" src="picthumb.jpg" border="0" alt="" /></a></p>

    Please help

Viewing 7 replies - 1 through 7 (of 7 total)
  • hanely

    (@hanely)

    14 years, 8 months ago

    Hey,

    This is a very informative post from you. I was thinking of a way to make spaces for my posts. It’s a good thing I came across your post.

    Thanks a lot.

    Emo Quiz

    Simon Fairbairn

    (@simonfairbairn)

    14 years, 8 months ago

    OK, this

    style="margin: 0px auto 10px;

    Means that there is no margin at the top, 10px at the bottom and an automatic amount either side (which in effect centers it).

    If you want the image to be centered, you could try using padding:

    style="margin: 0px auto 10px; padding: 20px;

    Or, if you don’t need it to be centered.

    style="margin: 20px;

    If neither of these suggestions work immediately, post a link to the problem and I’ll take a look.

    Mark Ratledge

    (@songdogtech)

    14 years, 8 months ago

    You can set spacing like that inline, or in the stylesheet if you’re used to CSS in your theme’s style.css.

    .spacer { margin: 10px 0 0 0px; }

.spacer2 { margin: 20px 0 0 0px; }

.spacer3 { margin: 30px 0 0 0px; }

    And call it in html:

    <p class="spacer1" />
    Simon Fairbairn

    (@simonfairbairn)

    14 years, 8 months ago

    External stylesheets are on the righteous path to theme glory, it is true, so if you do feel comfortable with editing your css (and shame on me for assuming you wouldn’t be), go with Songdogtech’s suggestion.

    Just so you know, the order of the margin CSS property is:

    margin: top right bottom left;

    So,as an example, Songdogtech’s suggestion above would leave you with 10px spacing up top, and 0 on the right bottom and left. Make sure you replace these zeros with whatever spacing you want.

    Mark Ratledge

    (@songdogtech)

    14 years, 8 months ago

    Good point; I should have explained the orientation of the margins as SimonFairbairn showed, i.e. top, right, bottom, left,…

    Thread Starter Navie

    (@navie)

    14 years, 8 months ago

    Thanks guys, you’ve been a great help.

    I’m seeing some success with the following code for photos,

    <p style=”text-align: center;”><img class=”aligncenter” style=”margin: 30px auto; display: block; width: 400px; text-align: center;” src=”thumb.jpg” border=”0″ alt=”” /></p>

    Initially I tried using,

    style=”margin: 15px auto 15px;

    .. in HTML view, but Visual view auto changed it back to

    margin: 15px auto

    Strange, does the above provide both top and bottom spacing?

    I’m not using external stylesheets at the moment, as I’m not really fluent in css

    I haven’t figured out how to add spacings for text yet (below), and my text html seems to be outdated as well, the “font-size:130%” part doesn’t seem to be working in the new WP2.8

    <div style=”text-align: center;”><span style=”font-family:trebuchet ms;font-size:130%;”>Bing Or Boom</span></div>

    Once again, thank you for the help, I really appreciate it.

    Mark Ratledge

    (@songdogtech)

    14 years, 8 months ago

    To space text in a paragraph, you can also use line height, and it can be better to size text with ems instead of percentages, but be consistent with it and change all instances of percentages to ems. You can use styles in line as well as in an CSS style sheet.

    p
{
line-height: 1.5em;
margin-bottom: 1.0em;
font-family:Verdana, Tahoma, Arial, Serif;
color: #000;
font-size:0.7em;
}

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How To Creat Spacings In Posts?’ is closed to new replies.