CSS规范规定,应通过将指定值除以2并将结果应用于文本行的上方和下方来将行高应用于文本.
这与传统的领先理解有很大不同,这通常意味着间距仅在文本行上方"添加".(我知道这不是100%正确,因为实际行高不会增加空间,而是设置行的高度;但是,通过这种方式描述问题更简单).
考虑这个示例标记:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
margin:0;
font-size: 13pt;
line-height: 15pt;
}
h1
{
margin:0;
font-size: 21pt;
line-height: 30pt;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</body>
</html>
如果行高为等于领先,则之间的距离的传统理解<h1>和第一<p>将等于之间的距离<p>S",因为这个距离由领先限定.然而,这种情况并非如此.
虽然<p>s 之间的距离保持一致(p's line-height - p's font-size = 15 - 13 = 2pt),<h1>但第一个之间的距离<p>是不同的:它等于(p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt.
如果使用浏览器处理上述标记,则可以通过肉眼很容易地注意到这一点.
问题是在页面上保持垂直视觉节奏的传统方式是通过设置基数前导倍数的元素引导.如上所示,此方法不适用于CSS.
我有3个问题:
更新:非常感谢您的投入!请注意,我建议我自己的解决方案,我将非常感谢任何评论:https://stackoverflow.com/a/8335230/710356
是.它不是很简单,但使用时position:relative;,你可以正确排列,例如:
h2 {
font-size: 36px;
line-height: 48px;
position: relative;
top: 6px;
}
这是一个正在进行中的演示
设计CSS的人不是排版员.这可能不是故意的.
好吧，这似乎比我的其他解决方案效果更好。<span>它仍然在块元素内使用额外的s。诀窍是将块元素的设置line-height为1，并调整跨度的line-height，同时使用顶部和底部取消它margin。请注意，这需要将显示设置为inline-block。
<h1>然而，实际设置边距（以便在和之间进行行高中断<p>）变得相当困难，并且需要一些数学知识。因此，我想，在 CSS 中尝试使用传统的排版方法进行引导太耗时，无法在开发人员的工作中实际使用。
无论如何，这是最终的代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span.p
{
display:inline-block;
line-height: 32px;
}
span.h
{
display:inline-block;
line-height: 64px;
margin-top: -32px;
margin-bottom: -32px;
}
p
{
margin:0;
font-size: 26px;
line-height: 1;
}
h1
{
margin:0;
font-size: 42px;
line-height: 1;
}
</style>
</head>
<body>
<h1><span class="h">Molloy</span></h1>
<p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
<p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
<h1><span class="h">Lorem Ipsum is simply</span></h1>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
14161 次 |
| 最近记录： |