Line break height/spacing

• 

  journeyingthroughthebible · Member · Jun 6, 2014 at 12:23 pm

  • Copy link
  • Add topic to favorites

  Hi
  How can you vary the height of a line break? I would like to add a line break that is one and a half times the standard line break. This means that the text above and below the line break has 1.5 times as much space as the normal distance between lines (but they are not spaced as much as the distance between paragraphs)? Many thanks.

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

• 

  timethief · Member · Jun 6, 2014 at 3:56 pm

  • Copy link

  Hello there,
  Please use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can copy and paste your text into a thread that will appear in the CSS Forum where you will get the help you need.

• 

  journeyingthroughthebible · Member · Jun 6, 2014 at 5:22 pm

  • Copy link

  Hi timethief
  Thanks for the redirection, but I have actually discovered (rather by accident – I was testing another feature) a way of doing this on an individual line break basis using HTML, which I thought I would share.

  I wanted the option of varying the distance below my line breaks in some cases, rather than having a global fix (which I assume would be the case with CSS, although if that isn’t the case, please let me know).

  I used the ‘span style’ and ‘display block’ feature in the following way (this is an example):

  </br><span style=”display:block; margin-bottom:-15px;”>your text here</span></br>

  You could presumably set all four margins independently if you wanted to do that. In this case all I wanted was to do was to define the bottom margin. What appears to happen is that the ‘span’ code is forced to behave as a ‘paragraph’ by the ‘display: block’ code. Thus it adds a clear line (it seems to be a default setting of some kind, not the one I set in the CSS). By reducing the margin by 15px, I have arrived at exactly the distance I wanted.

  I will post further, if I have any further details/explanation of this get-round. I hope this helps, Rob

• 

  journeyingthroughthebible · Member · Jun 7, 2014 at 5:21 pm

  • Copy link

  Hi
  I have further discovered a simpler option.
  If you just replace the standard line break code
  with the code

  <span style=”display:block;margin-bottom:-15px;”></span>
  This will provide a line break that is narrower than the normal. You will need to adjust the margin bottom number to get the result you want. Also be aware that what works on pages on the full site may look different on the same pages when displayed on a mobile device.

• 

  timethief · Member · Jun 9, 2014 at 8:35 pm

  • Copy link

  It’s good to know you worked this out. Happy blogging.