【发布时间】：2013-10-08 10:05:58
【问题描述】：
我正在尝试为我的页面设置基线网格，但是当我设置字体比例时，文本不适合基线网格。
我做错了什么？问题与字体比例有关？
这里是小提琴：http://jsfiddle.net/3stut/
这里是代码：
HTML
<body>
<h1>Your Name</h1>
<h2>Your Name</h2>
<h3>Your Name</h3>
<h4>Your Name</h4>
<h5>Your Name</h5>
<h6>Your Name</h6>
<p>Paragraph</p>
</body>
CSS
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,pre,table,fieldset,hr,.header,.media,.island{
margin-bottom:1.5rem;
}
html {
font:1em/1.5 Cambria, Georgia, "Times New Roman", Times, serif;
background: url(http://media.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid.png) center -6px repeat-y #fff;
color: #333;
width: 940px;
padding: 0 10px;
margin: 0 auto;
}
body {
width: 460px;
margin: 0 auto;
padding-top: 72px;
}
h1 {font-size:48px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:21px;}
h5 {font-size:18px;}
h6 {font-size:16px;}
【问题讨论】：
-
定义“基线网格”。我真的不明白你的问题。顺便说一句，当您更改它的布局时，使用 head 元素是没有用的。您可以简单地使用段落或任何其他文本元素。我建议不要更改为 font-size 因为这是这些元素默认定义的。
-
我的目标是让所有文本都位于基线网格中，如下所示：media.smashingmagazine.com/wp-content/uploads/technical-type/…、media.smashingmagazine.com/wp-content/uploads/technical-type/…，以便为我的文本提供垂直节奏
-
这不是用原来的布局吗？ jsfiddle.net/3stut/3
-
如果我删除字体比例，所有文本都适合基线：jsfiddle.net/3stut/4，但我需要有字体比例
-
您希望每个边距都相同，或者当文本放大时，边距也变大？ jsfiddle.net/3stut/6 或 jsfiddle.net/3stut/7