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

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

这里是我的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>

来源

2014-09-19 user3075987

这是什么原因你[寻找]（http://jsfiddle.net/m9zLj27j/9/）？ – Arvind 2014-09-19 04:52:14

padding：0 0 5px 0; – 2014-09-19 04:54:15

Maddy说得对。谢谢！ – user3075987 2014-09-19 04:59:25

试试吧，

1）您可以使用填充控制间距。 2）和大胆，你做得很好，但要h1 .section-title-bold

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

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

Update

来源

2014-09-19 04:52:33

类之间的空间你可以试试这个更新：

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

来源

2014-09-19 04:53:43 Arvind

这是[完整更新]（http://jsfiddle.net/m9zLj27j/9/） – Arvind 2014-09-19 04:54:13

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

来源

2014-09-19 04:56:28

使 “提升” 大胆只是简单地增加它周围强大的标签是这样的： <strong>Enhance</strong>

来源

2014-09-19 04:57:11 Code5

看来h1已经大胆的在里面文本。因此，您最好使用div而不是h1或使用高字体大小来表示“增强”文本。

来到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

来源

2014-09-19 05:00:38

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

来源

2014-09-19 05:01:27

试试这一个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; 
}

来源

2014-09-19 05:02:46

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

回答

相关问题