Paragraph spaces in WordPress editor – how to make space between paragraphs

To create paragraph spaces in TinyMCE or <p> </p> tinymce wordpress:

A WordPress style is <p><br “class=spacer_” /></p>, however this is not in my stylesheet,  it comes from using TinyMCE advanced as an editor plugin in the backend.

A quick way to do it is:

<p>&nbsp;</p>

but this will give full line height spaces between paragraphs.

I use this instead because I can adjust the line-height, thus distance between the paragraphs:

In the code:

<p class="spacer">&nbsp;</p>

In the stylesheet:

.spacer {
 line-height: 0.7em;
}

5 Comments

  1. Eric O'Brien says:

    You write, “I use this instead…” Are you saying that you have modified TinyMCE Advanced so that it produces that code instead of what it normally does?

    • GoogleThem says:

      Eric, “I use this instead” is not to modify TinyMCE Advanced, it’s to add a blank line using WP’s editor.

      First the blank line with a class so that you can target it in your stylesheet (like a carriage return – line feed combo with an adjustable height)
       

      Then add this to the stylesheet to create blank lines of any height you set:
      .spacer {

      line-height: 0.7em;
      }

  2. Costas says:

    This is great, but when I added it in the atahualpa theme style.css sheet it did not make any difference. When I checked for .css files there are 100 .css file in wordpress 3.0.5
    Any idea where the style code should be added?

    Thank you, this is a great site, I will spend some time here

    Costas

    • GoogleThem says:

      Costas, I add the custom formatting commands to this stylesheet:
      http://mywebsite.com/wp-content/themes/atahualpa/style.css

      These are not for the general website css in this case they are for custom wordpress WYSIWYG formatting tags such as center, clear and align left and align right.
      This is an example of one of mine:
      .aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

      .alignleft {
      float: left;
      }

      .alignright {
      float: right;
      }

      .alignleftclear {
      clear:both;
      vertical-align: middle;
      margin-bottom: .25em;
      margin-right: 10px;
      }
      .clear {
      clear:both:
      }
      IMG.absmiddle {
      vertical-align: middle;
      margin-bottom: .25em;
      }

Leave a comment