Question

特别是，我希望设置顶部和底部边距。我试过了margin: 10px 0;，但它没有用。我已经四处搜索了，其中的内容要么已经过时，要么是一个糟糕的答案。

编辑：代码

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%;
        }
    }
}

Answer 1

你可以这样做：的 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; }

Answer 2

您在寻找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
}

Answer 3

确实有效，正如JSFiddle所证明的那样。

注意hr上的样式：

hr {
  margin: 10px 0;
}

正如Ani在评论中提到的，如果这是在电子邮件模板中，您需要将样式直接放在hr元素上，如下所示：

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

设置hr标签边距的最简单方法是什么？

3 个答案: