Single Spacing In A Text Widget

• 

  mrstrongest · Member · Sep 23, 2011 at 2:37 am

  • Copy link
  • Add topic to favorites

  The first line in my sidebar used to be simply:

  Portfolio Thumbnails

  I’m trying to change it to:

  Portfolio Thumbnails
  (click to see full-size image)

  so the two lines are centered and single-spaced.

  I came up with some code that seemed to work perfectly in the Visual Editor, but when I pasted the corresponding HTML code into a revised text widget, it skipped a line (inserted a blank line) between the two lines of text in the sidebar.

  You can see this result at the top of the sidebar in my blog– I left it that way.

  Here’s the HTML I used (it inserts a 1-pixel high vertical space between the two lines):

  <p style=”text-align: center;”>Portfolio Thumbnails
  <img class=”aligncenter size-full wp-image-338″ title=”BlankVertSpace.1pixels” src=”http://markarmstrongillustration.files.wordpress.com/2010/05/blankvertspace-1pixels.jpg” alt=”” width=”50″ height=”1″ />(click to see full-size image)</p>

  Question: how can I get the two lines so one is directly under the other without having a blank line inserted between them?

  Thanks a lot for your help.

  Mark A.
  Blog url: http://markarmstrongillustration.wordpress.com/

• 

  staff-blorbo · Staff · Sep 23, 2011 at 6:24 am

  • Copy link

  They seem to be correct on your blog now. Were you able to resolve the issue?

• 

  mrstrongest · Member · Sep 23, 2011 at 11:33 am

  • Copy link

  Sorry, no.

  It still looks to me like there’s a blank line between the two lines of text– an obvious gap; a gap much bigger than the 1 pixel I tried to insert between the lines.

  When I read your comment, I thought perhaps it was a “browser display effect.” I’d only been looking at the results in Safari, so I called up the blog on Firefox, and the gap between the two lines is still there– identical, I’d say.

  What really puzzles me is that as I mentioned before, if I plug the same HTML code into the HTML Editor on a Create New Post page, and then look at the results in the Visual Editor, the text looks great: two lines, one above the other, with just the 1-pixel vertical space between them.

  Could you try that experiment? I think you’ll see that the gap in my sidebar looks a lot bigger than what you’ll see in the Visual Editor. Thanks.

• 

  andrewspittle · Staff · Sep 23, 2011 at 5:18 pm

  • Copy link

  Okay, the spacing that you see is actually just from the default styles for text in your sidebar. It’s not a margin or height issue but is rather from the line height defined for text in your sidebar.

  The line height is set to:

  line-height: 2.2em;

  This is what causes the gap you see. If you were to use a custom design upgrade you could adjust this spacing with custom CSS.

• 

  mrstrongest · Member · Sep 23, 2011 at 6:08 pm

  • Copy link

  Ah! I was afraid it might cost money… : (

  Many thanks for the info, I’ll see if I can come up with a workaround.