如何控制底部邊框的間距？

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

如何控制底部邊框的間距？

回答

相關問題