Css 是否有一个防弹概念，使h1和p在同一条（基线）线上精确？

请参见>

HTML:

嗯。。。经过多次调整后，它开始工作了。。。通过给h1一个120%（！？）的行高，p一个2.8em的行高，这是h1的字体大小（这很有意义！）。。。当然，让这两个元素都内联显示

---

问题是：有没有一种防弹的方法可以让h1和p精确地在同一条（基线）线上，不管我给它们多大？

只要把这两个元素（

h1

，

p

）都显示为内联元素（

display:inline；

）-

@redfox：我想这是可行的，如果还使用，则可以减少不同浏览器默认值的影响。更正：它似乎没有任何区别：（注意左边未选中的“规范化CSS”）。由于您的小示例，我遗漏了两个元素的浮动、垂直对齐和线条高度，这似乎是项目符号…：）@redfox：删除无用的

float

s、

vertical align

s以及边距和填充。您可能希望为容器应用填充-

div#标语

。然后一切正常：

<div id="slogan">
<h1 id="site-name"><span></span><txp:site_name /></h1>
<p id="site-slogan"><span></span><txp:site_slogan /></p>
</div>

/* @fontface! */
/* all fine in all browsers mac or windows */
/* h1 and p have more or less the same baseline by giving h1 a line-height of 120% ... */

#slogan {
    height: 3.7em;
    width: 960px;
    background-color: #220082;
    float: left;
    padding-top: .3em; /* to get h1 and p more or less in the middle of the box! */
}

h1#site-name {
    margin: 0 0 0 20px;
    padding: 0;
    color: #fff;
    font: normal normal 2.8em/120% FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    display: inline !important;
    vertical-align: text-bottom;
    float: left;
}

p#site-slogan {
    color: #fff;
    font: normal normal 1.5em/2.8em FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    margin: 0;
    padding: 0;
    display: inline !important;
    vertical-align: text-bottom;
    float: left;
}

/* end @fontface! */