css - H 标签不会位于基线网格上

Question

我正在尝试使用 font-size:12px & line height:18px 的基线网格。

除了 H 标签外，大多数事情似乎都没有问题。特别是 h2 标签以贯穿其中间的基线指南结束。

这是我第一次尝试基于此构建网站，所以我不确定它是否应该像那样，因为它们的边距仍然允许其他所有内容都到位，但标题不会显示为我预料到了。

结果的屏幕截图:

CSS

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}

/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#444;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;background: url("../images/gridbg.gif") repeat scroll 0 0 #FFFFFF;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

HTML

<h1>Welcome</h1>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>


<h2>Welcome</h2>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>

<h3>Welcome</h3>
<p>
Feel free to select a few different date/time combinations in order of preference.
This makes it easier for us to accomodate you when it is busy.
If your prefered slot is unavailable we will contact you to confirm whether you would like to use one of the alternatives you had previously specified. 
</p>

Answer 1

基线网格的垂直间隔为18px . h1的高度是3em , 和 2em对于 h2 . 3em表示 three times the font size , 因此 3*12px= 36px .因此网格贯穿这些标签。

基线网格并不意味着所有的东西都应该完全适合网格，它意味着页面的主要部分被均匀地适合和分开，例如 <p>在您的代码中。

如果你觉得一个h之间的差距标签及其后面的段落太宽，您可以添加一点 margin-top并减少 margin-botom相应的h标签。