Question

我想在这里完成两件事：

1）我想控制下边框的间距。有没有办法让底部边框在类型下面显示5个像素？ 2）另外，我想用粗体字“增强”。所以我的例子中的第一个词应该是粗体。

这是我的jsfiddle：http://jsfiddle.net/m9zLj27j/6/

这是我的代码：

h1 {
  font-family:Helvetica, Arial;
  font-size:1.6em;
  text-transform:uppercase;
  font-weight:normal;
  margin-bottom:-5px;
}
h1.section-title {
  font-family: Helvetica, Arial;
  font-size:32px;
  font-weight: normal;
  margin: 50px 0;
  border-bottom: 1px dotted #f66511;
}
h1.section-title-bold {
  font-weight: bold;
}
.rtecenter {
  text-align: center;
}
.blue {
  color: #2251a4;
}

<h1 class="section-title rtecenter blue">
<span class="section-title-bold">Enhance</span> Your Search</h1>

Answer 1

试试吧，

1）您可以使用填充来控制间距。 2）为了大胆你做得很好，但在班级h1 .section-title-bold

之间留出空格

＆＃13;

h1 {
  font-family:Helvetica, Arial;
  font-size:1.6em;
  text-transform:uppercase;
  font-weight:normal;
  margin-bottom:-5px;
}
h1.section-title {
  font-family: Helvetica, Arial;
  font-size:32px;
  font-weight: normal;
  margin: 50px 0;
  border-bottom: 1px dotted #f66511;
  padding-bottom:5px;
}
h1 .section-title-bold {
  font-weight: bold;
}
.rtecenter {
  text-align: center;
}
.blue { 
  color: #2251a4;
}

＆＃13;

<h1 class="section-title rtecenter blue">
  <span class="section-title-bold">Enhance</span> Your Search
</h1>

＆＃13;

<强> Update

Answer 2

您可以尝试此更新：

h1.section-title {
    font-family: Helvetica, Arial;
    font-size:32px;
    font-weight: normal;
    margin: 50px 0;
    border-bottom: 1px dotted #f66511;
    padding-bottom: 5px; /* bottom spacing */
}

span.section-title-bold { /* used span instead of h1 */
    font-weight: bold;
}

Answer 3

jsfiddle example

<强> HTML

    <h1 class="section-title rtecenter blue">
    <span class="section-title-bold">Enhance</span> Your Search</h1>

<强> CSS

h1 {
    font-family:Helvetica, Arial;
    font-size:1.6em;
    text-transform:uppercase;
    font-weight:normal;
    margin-bottom:-5px;
}

    h1.section-title {
        font-family: Helvetica, Arial;
        font-size:32px;
        font-weight: normal;
        margin: 50px 0;
        border-bottom: 1px dotted #f66511;
         padding-bottom: 5px;
    }

h1 .section-title-bold {
    font-weight: bold;
}

.rtecenter {
text-align: center;
}

.blue { color: #2251a4; }

Answer 4

使“增强”粗体只需在其周围添加强标签，如下所示： <strong>Enhance</strong>

Answer 5

似乎h1已经加粗了内部文字。因此，您最好使用div代替h1或使用高字体大小来代替＃34;增强＆＃34;文本。

来到边界的5px间隙，你可以使用:after伪类来做到这一点。

<强> CSS

.section-title {
    font-family: Helvetica, Arial;
    font-size:32px;
    text-transform:uppercase;
    margin: 50px 0;
}
.section-title:after {
    content:"";
    border-bottom: 1px dotted #f66511;
    display: block;
    margin-top: 5px;
}
section-title-bold {
    font-weight: bold;
    font-size: 40px;
}
.rtecenter {
    text-align: center;
}
.blue {
    color: #2251a4;
}

<强> Working Fiddle

Answer 6

h1 {
    font-family:Helvetica, Arial;
    font-size:1.6em;
    text-transform:uppercase;
    font-weight:normal;
    padding-bottom:5px;}

    h1.section-title {
        font-family: Helvetica, Arial;
        font-size:32px;
        font-weight: normal;
        margin: 50px 0;
        border-bottom: 1px dotted #f66511;}

h1.section-title-bold {
    font-weight: 600;}

.rtecenter {
text-align: center;
}

.blue { color: #2251a4; }

Answer 7

试试这个Click here for fiddle

<强> HTML

<h1 class="section-title rtecenter blue">
    <strong class="section-title-bold">Enhance</strong> Your Search</h1>

CSS

h1.section-title {
    font-family: Helvetica, Arial;
    font-size:32px;
    font-weight: normal;
    margin: 50px 0;
    border-bottom: 1px dotted #f66511;
    padding:0 0 5px 0;
}

如何控制底部边框的间距？

7 个答案: