добро пожаловать в SO! Как упоминалось ранее, опубликуйте минимальный воспроизводимый пример , чтобы мы могли понять, как вам помочь. Кроме того, вам нужно указать, с чем именно у вас возникли проблемы. Если вы просто хотите иметь строку .smallHeader, basi c 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: font-size , MDN: line- height , MDN: padding
Однако имейте в виду, что с длинным текстом, использующим padding для верхнего / нижнего интервала, может быть предпочтение, потому что когда строки переносятся на меньшие экраны, каждая обернутая строка будет иметь одинаковый line-height (обычно не желаемый эффект), а вместо вокруг блока текста.
Это лишь один из многих способов создания small header row ....
A snippet с использованием вашего кода и некоторых дополнительных элементов, чтобы показать разницу между line-height и padding. Запустите фрагмент в режиме «Просмотр полной страницы» и измените размер браузера ...
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>