Linking HTML to a CSS class

Question

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?

Well for starters what you have isn't css. There is no down property nor does css take brs in it... — Patsy Issa
– Patsy Issa, Commented Oct 9, 2014 at 9:19
Down is not a valid atribute for css. What do you want to achieve with it? — Vincent Beltman
– Vincent Beltman, Commented Oct 9, 2014 at 9:20
Google margin and padding properties, those may give you the effect you're looking for. — Jhecht
– Jhecht, 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!? — trainoasis
– trainoasis, Commented Oct 9, 2014 at 9:21

Salman Arshad · Accepted Answer · 2014-10-09 09:28:18Z

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>

edited Oct 9, 2014 at 9:28

answered Oct 9, 2014 at 9:20

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

Patsy Issa Over a year ago

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

Kunj · Accepted Answer · 2014-10-09 10:36:10Z

1

Try this:

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

edited Oct 9, 2014 at 10:36

answered Oct 9, 2014 at 9:21

Kunj

2,0262 gold badges23 silver badges34 bronze badges

Comments

ghorg12110 · Accepted Answer · 2014-10-13 15:03:29Z

1

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

    .movedown {
        margin-top: 120px;
    }

edited Oct 13, 2014 at 15:03

answered Oct 9, 2014 at 9:21

ghorg12110

366 bronze badges

Comments

Jerodev · Accepted Answer · 2014-10-09 09:21:20Z

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>

answered Oct 9, 2014 at 9:21

Jerodev

33.3k11 gold badges96 silver badges113 bronze badges

Comments

Mayank K. Swami · Accepted Answer · 2014-10-09 09:29:32Z

0

Instead of 'down' try:

top:120px;

edited Oct 9, 2014 at 9:29

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

answered Oct 9, 2014 at 9:25

domenv

1

Comments

CompanyDroneFromSector7G · Accepted Answer · 2014-10-09 09:38:54Z

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.

answered Oct 9, 2014 at 9:38

CompanyDroneFromSector7G

4,55915 gold badges62 silver badges102 bronze badges

Collectives™ on Stack Overflow

Linking HTML to a CSS class

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related