아래쪽 테두리의 간격을 어떻게 제어합니까?

Question

여기서 두 가지를 수행하고 싶습니다.

1) 아래쪽 테두리의 간격을 제어하고 싶습니다. 아래쪽 테두리를 5 픽셀 아래로 표시 할 수있는 방법이 있습니까? 2) 또한 "Enhance"라는 단어를 굵게 표시하고 싶습니다. 따라서 나의 예에서 첫 단어는 대담해야합니다.

여기 내 jsfiddle입니다 :

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) 당신은 패딩을 사용하여 간격을 제어 할 수 있습니다 http://jsfiddle.net/m9zLj27j/6/이

여기 내 코드입니다. 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

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 보인다 벌써 내부를 과대 선전하다 텍스트. 따라서 h1 대신 div을 사용하거나 "Enhance"텍스트에 높은 글꼴 크기를 사용하는 것이 좋습니다.

국경과의 간격이 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; 
}