0

我正在尝试使用字体大小:12px 和行高: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>
4

1 回答 1

1

基线网格的垂直间隔为18px。的高度h13em2em对于h23em表示字体大小的三倍,因此 3*12px= 36px。因此,网格贯穿这些标签。

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

如果你觉得一个标签和后面的段落之间的差距h太大,你可以增加一点,并相应地margin-top减少标签。margin-botomh

于 2012-05-15T14:37:22.343 回答