Forcing Line Breaks

poetrydude66 · Member · Dec 1, 2013 at 9:43 pm
Copy link

Add topic to favorites
What is the correct method for forcing line breaks? I have already read this help file:

http://en.support.wordpress.com/editors/styling-individual-posts-and-pages/#adding-extra-line-breaks

I have an experimental section of HTML I am debugging, and I want clear line break separation above and below this test section. All of these HTML directives end up being *deleted* by the text editor:
```
 
 

&nbsp;
```
The only way I could get a break inserted was some variation on this HTML before and after the experimental HTML:

EXPERIMENT BEGINS

If I left the text section blank, that line would then get deleted.

So the HTML text editor appears to have some very strange behavior around line breaks, and I simply want to understand if there is an easier way to force line breaks into a document that will stay there.

The blog I need help with is: (visible only to logged in users)
justpi · Member · Dec 1, 2013 at 9:59 pm
Copy link
a) The up-to-date br tag is this:
 
b) To create a line break you press enter in the Text editor or shift-enter in the Visual editor. Period.
c) Line breaks are used to force a new line, not to create blank space. If what you’re looking for is blank space, you use different methods.
poetrydude66 · Member · Dec 1, 2013 at 11:23 pm
Copy link
I inserted the up-to-date br tag as you give it FOUR TIMES in the text editor. I go to Visual Edit or Preview and the line breaks show. Now I go back to Text editor and those four line breaks are GONE.

The only way I could get the line break to stay was to introduce the weird P tag with the padding-top style option.
justpi · Member · Dec 2, 2013 at 5:28 am
Copy link
The br tag is added to the HTML of your page when you press enter in the Text editor or shift-enter in the Visual editor. It’s hidden from view in the Text editor, to avoid unnecessary clutter. You never need to actually use the tag in the Text editor.
And as I already said, a line break is used to force a new line of text, NOT to create extra vertical space. This is what a line break means:
```
TEXT HERE
MORE TEXT (starting on a new line although there was room for it to start next to "HERE")
```
If you link to the post or page in question and tell me what you want where, I can show you how to do it.
poetrydude66 · Member · Dec 2, 2013 at 6:11 am
Copy link
justpi has access to this page but it will still be hidden from others for a few more days (let me know if you want to see it):

Impressionist Painting of Taylor Swift Ed Sheeran Performing Everything Has Changed

Look at the bottom of the page to two test sections that have bracketed text areas:
EXPERIMENT BEGINS
(insert some experimental HTML)
EXPERIMENT ENDS

I was trying to add multiple blank lines before and after those EXPERIMENT lines.

And – as long as you are peeking at that – my goal was to have the bottom line of Link 1 through Link 4 align vertically with the bottom of the cursive characters “PoetryDude66” in the signature image. Since the image has white space above and below the text, I think this requires the HTML to have some absolute positioning based on pixels. My code is wrong and I’m just not getting it.
justpi · Member · Dec 2, 2013 at 8:03 am
Copy link
For starters, you cannot control the space below the “starry night” thumbnail correctly, because you set the alignment of the image to left, which means that the content that follows should wrap around (start next to the image instead of below it). In other words, at the moment the padding you added to “EXPERIMENT BEGINS” doesn’t start below the image, it starts at the top of the paragraph that contains the image. So first you need to set the alignment of the image to none instead of left.

Now, your description isn’t clear to me: do you mean you want extra space above and below the boxed content? Also, I don’t see why you created that content as a list (with a bunch of style rules to transform it). If you want a linking signature image and a few links next to it, with a border around the whole thing, then all you need is this:
```

<a href="ETC"><img class="alignleft style="box-shadow:none;margin-top:1.5rem;" ETC ETC /></a>
<a style="margin-right:1rem;" href="#">Link 1</a><a style="margin-right:1rem;" href="#">Link 2</a><a style="margin-right:1rem;" href="#">Link 3</a><a href="#">Link 4</a>

```
As you see, to adjust the position of the image I added a top margin.
To add space above and below the box, you add a top and a bottom margin to the styling of the paragraph.

Finally, you added a fixed width to your boxes. You never do that on a responsive theme: on narrower devices the rest of the content will shrink but the box won’t.
poetrydude66 · Member · Dec 2, 2013 at 12:34 pm
Copy link
This appears to be working and you can see how I updated it to reflect your changes.

What is the difference between padding and margin? In the P tag you are padding the bottom, whereas in the IMG tag you are using top margin. Not clear what this is doing .

What is the “rem” unit you used for the padding? How does that compare to pixel?

Based on your comment about not using absolute dimensions for the box, would it also be true that the large image at the top of my page should not have its width specified? I took out the width=”650″ attribute and instead added to the class “size-full”. The image at top is still taking up the full comment width even without the directive for width. Should I leave width out entirely?

Finally, some of these IMG tags had an ID attribute as in id=”i-7″. I assume this is some kind of remnant of how they are coded in the Media library? Are they needed on a Post or Page?

Thanks for help here.
justpi · Member · Dec 3, 2013 at 2:05 pm
Copy link
1) Margin is space outside, padding is space inside. For example, suppose you have a plain paragraph and then a blockquote enclosed in a border: increasing the top margin of the bq will increase the space between the top border and the end of the previous paragraph; increasing the top padding of the bq will increase the space between the top border and the beginning of the quotation.
http://www.w3schools.com/css/css_boxmodel.asp
(So in some cases you can use the one or the other: to increase the space between two regular paragraphs, you can add a bottom margin or padding to the upper one, or a top margin or padding to the lower one.)

2) px is absolute, rem is relative. (You can google for details, but you needn’t really bother.) I used rem because that’s what your theme uses.

3) “would it also be true that the large image at the top of my page should not have its width specified?” No. The code of the image displays its normal width (i.e. for the theme at its widest), but the CSS of the theme also says make sure full-width images don’t exceed the width of the column. So when the theme shrinks the images also shrink, no matter what width you see in the Text editor.
This part of the image code:
width=”123″ height=”456″
doesn’t control what shows up on the actual page, it only gives you info on what you have inserted.
You needn’t tamper with image codes at all (other than adding the style attribute), except in very unusual cases.

4) I don’t know where the ID attribute came from; my guess is you added it yourself.

No items found.