歡迎來到SO！如前所述，請(qǐng)發(fā)布一個(gè)最小的、可重現(xiàn)的示例，以便我們找出如何幫助您。此外，您需要準(zhǔn)確指出您遇到的問題。如果你只是想要.smallHeader一行，基本的 CSS 可以是：
.smallHeader {
font-size: small; /* small compared to 'medium' (which is the default, avg. 16px) */
line-height: 1.2; /* (without 'px') fairly common default. Will also center text vertically */
/* A higher value will increase top/bottom spacing of text, but */
/* instead you can also use 'padding' to create T/B spacing */
MDN：字體大小， MDN：行高， MDN：填充
但是請(qǐng)注意，使用padding頂部/底部間距的長文本可能會(huì)有偏好，因?yàn)楫?dāng)行在較小的屏幕上換行時(shí)，每個(gè)換行將具有相同的line-height（通常不是預(yù)期的效果）而不是圍繞文本塊的間距。
這只是創(chuàng)建小標(biāo)題行的眾多方法之一....
使用您的代碼的片段line-height和一些額外的代碼來顯示和之間的區(qū)別padding。在“全頁視圖”中運(yùn)行代碼段并調(diào)整瀏覽器大小...
ul,li {
padding: 0; list-style-type: none /* override CSS defaults */
}
ul {
margin: 0 /* ditto */
}
.smallHeader {
font-size: small; /* small compared to 'medium' */
line-height: 1.6; /* demo, default is approx. 1.2 */
/* eye-candy */
background-color: grey; color: white;
text-align: center;
}
li.menu-item {
display: inline; /* default is 'list-item'. This makes it go horizontal */
/* eye-candy */
padding: 0 1em; /* some L/R spacing between menu-items */
}
.bigHeader {
font-size: x-large; /* extra large */
padding: 1em 0; /* T/B padding instead of line-height */
/* eye-candy */
background-color: black; color: white;
text-align: center;
}
[class^="test"] { background-color: rgba(0,0,0,.1) } /* classnames starting with "test" */
.test-lh { line-height: 1.5em }
.test-pd { padding: 1.5em }
<header>
<div class="smallHeader">
<ul id="menu-small-menu" class="small_menu">
<li id="menu-item-10429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10429">12 Royal Street California USA</li>
<li id="menu-item-6305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6305">001-122-134-555</li>
<li id="menu-item-6211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6211">contact@domain.com</li>
</ul>
</div>
<div class="bigHeader">extra large text</div>
</header>
<div class="test-lh">
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae. Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem est. Mel ex oporteat consectetuer.
</div>
<div class="test-pd">
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et deleniti copiosae. Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem est. Mel ex oporteat consectetuer.
</div>
