0

I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:

.movedown {
    position: relative;
    down: 120px;
}

and this HTML, where my text is:

<span class="movedown">*text here*</span>

I only need it on a single page. Anyone know where I'm going wrong?

6
  • 2
    Well for starters what you have isn't css. There is no down property nor does css take brs in it... Commented Oct 9, 2014 at 9:19
  • Down is not a valid atribute for css. What do you want to achieve with it? Commented Oct 9, 2014 at 9:20
  • Google margin and padding properties, those may give you the effect you're looking for. Commented Oct 9, 2014 at 9:20
  • use position absolute and top instead of down. Or keep relative and use margin-top. Read some tutorials on CSS and HTML, it's not that hard!? Commented Oct 9, 2014 at 9:21
  • Why not just use a bunch of separate p tags? Commented Oct 9, 2014 at 9:26

6 Answers 6

5

Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:

.long-br {
    display: block;
    height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>

Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:

.long-gap {
    margin-top: 12em;  
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>

Sign up to request clarification or add additional context in comments.

1 Comment

Do you really think it wise to point him in the em direction when he doesn't have a clue of what css is....
1

Try this:

 .movedown {
        position: relative; //Not required
        margin-top: 120px;
    }

Comments

1

You need to use the CSS property margin-top to add some space without using line breaks.

    .movedown {
        margin-top: 120px;
    }

Comments

0

down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.

.down {
  margin-top: 50px; 
}
*top text*
<div class="down">*text here*</div>

Comments

0

Instead of 'down' try:

top:120px;

Comments

0

Just use <div> elements instead of <span>.

By default div is a block style element and span is inline.

block occupies the whole row, so each new one will be on a new row.

You can change the default behaviour with CSS but better to get a grip of the basic elements first.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.