设置基线网格

我想为我的页面设置基线网格，但是当我设置字体比例时，文本不适合基线网格。设置基线网格

我在做什么错了？问题与字体比例有关？

这里是代码：

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;}

来源

2013-10-08 swayziak

定义“基线网格”。我真的不明白你的问题。当你改变它的布局时，没有使用head元素的用处。您可以简单地使用段落或任何其他文本元素。我建议不要更改为字体大小，因为这些元素是默认定义的。 – nkmol

我的目标是让所有文本都坐在基线网格中，如下所示：http：//media.smashingmagazine.com/wp-content/uploads/technical-type/img/full/10.jpg，http：// media.smashingmagazine.com/wp-content/uploads/technical-type/img/full/09.jpg，为了给我的文字赋予垂直节奏 – swayziak

这不是原来的布局吗？ http://jsfiddle.net/3stut/3/ – nkmol

像这样

demo

CSS

h1 {font-size:48px; margin:0; padding:0;} 
h2 {font-size:30px; margin:0; padding:0;} 
h3 {font-size:24px; margin:0; padding:0;} 
h4 {font-size:21px; margin:0; padding:0;} 
h5 {font-size:18px; margin:0; padding:0;} 
h6 {font-size:16px; margin:0; padding:0;}

像this?

demo1

demo2

demo3

CSS

h1{ 
font-size:30px; 
}

来源

2013-10-08 10:10:28 falguni

文本不与基线 – swayziak

@ user2473588基准的意思？你想要什么请清除 – falguni

该文本的基准：http://media.smashingmagazine.com/wp-content/uploads/2012/10/accurate-alignment.jpg – swayziak

如果“基线网格”指的是什么传统意味着排版，然后代码中有真的没有尝试在设置一个ba的东西seline网格。对于这样的网格，您需要确保元素的总高度（包括边距）是网格线高度的倍数。没有造型，例如标题和图像不在基线网格上。

为标题，假设您的基于PX-精整方法和CSS重置，设置利润为零，下面将使标题满足的基本要求：

* { font-size:16px; line-height: 18px; } 
h1 {font-size:48px; line-height: 54px;} 
h2 {font-size:30px; line-height: 36px; } 
h3 {font-size:24px; line-height: 36px; } 
h4 {font-size:21px; line-height: 36px; } 
h5 {font-size:18px; } 
h6 {font-size:16px; }

在这里，所有行高度的整数倍18像素。您可以通过将线高度部分缩小（甚至可以缩小到每个元素的字体大小或稍微小一点）来修改该方法并添加例如相应的上限。

这不会使标题文本基线与另一列中的正常文本基线对齐。这种调整对于CSS来说几乎是不可能的，因为字体底部和字体基线之间的距离是未知的。如果您只玩一种字体或几种字体，并希望它们可用，则可以对事物进行微调（例如，使用相对定位）以使基线匹配。但重点是普通文本基线匹配，这可以通过设置元素的高度来实现，如上所述。

来源

2013-10-08 10:49:38

所以我的代码是正确的？（http://jsfiddle.net/3stut/）我用过：html {font：1em/1.5 Cambria，Georgia，“Times New Roman”，Times，serif;}和h1，h2，h3，h4，h5，h6， hgroup，ul，ol，dd，p，figure，pre，table，fieldset，hr，.header，.media，.island {margin-bottom：1.5rem;}为了使行高和margin-bottom倍数为16px – swayziak

@ user2473588，您只在根元素上设置了“line-height”。其他元素将继承'1.5'的声明值，然后将乘以每个元素的字体大小。 –

谢谢，所以行高总是需要16px的倍数？ – swayziak

设置基线网格

回答

相关问题