What's the simplest way to set the margins for the hr tag?

Question

Particularly, I'm looking to set the top and bottom margins. I tried margin: 10px 0;, and it didn't work. I've googled around, and stuff is either way outdated, or a bad answer.

EDIT: Code

html

<div id="new_information_section">
    <div class="tabbable">
        <ul class="nav nav-pills" id="info_nav">
          <li class="active"><a href="#">Admissions</a></li>
          <li><a href="#">The School</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <section id="sat_scores">
                    <div class="chunk">
                        <h3>SAT Scores</h3>
                        <ul>
                            <li>Math: 600-690</li>
                            <li>Reading: 570-690</li>
                            <li>Writing: 560-660</li>
                            <li>Composite: 1130-1320</li>
                            <hr />
                            <li>89% submit</li>
                        </ul>
                    </div>

                    <div class="chunk">
                        <canvas id="sat_math" width="200" height="200"></canvas>
                    </div>
                </section> <!-- SAT Scores -->


            </div>

            <div class="tab-pane" id="tab2">
                <p>Howdy, I'm in Section 2.</p>
            </div>
        </div>
    </div>

</div>

css

#new_information_section {
    #info_nav {
        margin-top: 50px;
    }
    .chunk {
        display: inline;
        float: left;
        clear: none;
        margin-right: 100px;
    }
    h3 {
        font-family: Verdana;
    }
    ul {
        li {
            margin: 10px 0;
        }
        hr {
            width: 50%;
        }
    }
}

Sorry, I didn't post code because I just thought that setting margins for hr tags didn't work in general, but I'll post code in a sec — Adam Zerner, Dec 11 '13 at 20:42
Simple solution: apply new css rules to your list instead of adding
inside of a
. It's invalid HTML. — Ani, Dec 11 '13 at 20:48
@FranciscoCarvalho I am not sure what you mean ?...I was telling OP to do it through css instead of using `
` — Ani, Dec 11 '13 at 20:55

score 6 · Accepted Answer · answered Dec 11 '13 at 21:02

6

You can do: HTML

                    <ul>
                        <li>Math: 600-690</li>
                        <li>Reading: 570-690</li>
                        <li>Writing: 560-660</li>
                        <li>Composite: 1130-1320</li>
                        <li><hr class="myhrline"/></li>
                        <li>89% submit</li>
                    </ul>

CSS

  hr.myhrline{
     margin: 10px;
  }

answered Dec 11 '13 at 21:02

Ani

4,473
4
26
31

That worked, thanks! Just so I understand, you have to style the class rather than the hr, correct? Why can you apply some styles to hr, but not others (like margin)? – Adam Zerner Dec 11 '13 at 21:10
Yes, Also include it inside `
` tags. The problem was your HTML was not valid. Since you add
in the middle of the list...instead of adding it inside `
` tag. You cannot add anything between `
- .

Ani

Dec 11 '13 at 21:11

I just tried styling the `

` without adding a class, but having it inside the `

` tags, and that worked. So I guess the problem was the `

` tags, and not the class.

– Adam Zerner Dec 11 '13 at 21:24

score 3 · Answer 2 · answered Dec 11 '13 at 20:35

Are you looking for this?

HTML

<div class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<hr class="line">
<div class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

CSS

hr.line {
    width: 90px;
    color: red;
    margin-top: 30px;
    margin-bottom: 30px
}

score 2 · Answer 3 · answered Dec 11 '13 at 20:36

2

It does indeed work, as evidenced by this JSFiddle.

Note the styling on the hr:

hr {
  margin: 10px 0;
}

As Ani has alluded to in the comments, if this is in an email template, you will need to put the style inline, directly on the hr element, as follows:

<hr style="margin: 10px 0" />

answered Dec 11 '13 at 20:36

Jon Newmuis

25,722
2
45
57

You can include a style tag in HTML encoded emails. It does not require inline CSS. – Robbert Dec 11 '13 at 20:39
Support for `style` tags is dependent on the email client. You'll have much better luck putting the styles inline. See http://stackoverflow.com/questions/225828/can-i-put-a-style-style-tag-within-the-body-of-a-html-file – Jon Newmuis Dec 11 '13 at 20:41

What's the simplest way to set the margins for the hr tag?

3 Answers3