0

font-size:12px&line height:18pxのベースライングリッドで作業しようとしています。

Hタグを除いて、ほとんどのものは問題なく並んでいるようです。特にh2タグは、ベースラインガイドがその中央を通過することになります。

これは、これに基づいてWebサイトを構築しようとした最初のショットです。そのため、余白によって他のすべてが適切に配置されるため、そのようなものかどうかはわかりませんが、見出しが期待どおりに表示されません。

結果のスクリーンショット:ここに画像の説明を入力してください

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。の高さh13em、および2emですh23em、フォント サイズの 3 倍、つまり 3*12px= を意味し36pxます。したがって、グリッドはこれらのタグを通過します。

ベースライン グリッドは、すべてがグリッドに正確に収まる必要があるという意味ではなく、ページの主要部分 (コード内の<p>s など) が均等に収まって分割されていることを意味します。

hタグとその次の段落の間のギャップが広すぎると感じた場合は、タグを少し追加しmargin-topて減らすことができます。margin-botomh

于 2012-05-15T14:37:22.343 に答える