html – 控制标题标记内标记的行高？

概述我有一个标题(< h1>),它下面有一种标语. (我使用了< small>标记,并将字体大小设置为一定百分比,因此当我更改较小屏幕的标题的字体大小时,它会完美排列.我正在使用em单位,如果这很重要.) 首先,< small>标签很好地位于主标题下面,但我意识到我忘记了HTML5 DOCTYPE声明.所以,在我发现这个遗漏并纠正之后,间距都是错误的. 这是我的代码： HTML： <h1 class= 我有一个标题(< h1>),它下面有一种标语. (我使用了< small>标记,并将字体大小设置为一定百分比,因此当我更改较小屏幕的标题的字体大小时,它会完美排列.我正在使用em单位,如果这很重要.)

首先,< small>标签很好地位于主标题下面,但我意识到我忘记了HTML5 DOCTYPE声明.所以,在我发现这个遗漏并纠正之后,间距都是错误的.

这是我的代码：

HTML：

<h1 >Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>

CSS：

h1.banner {text-align: center;display: block;Font-family: 'arvil';Font-size: 6.5em;color: #94babd; }h1.banner > small {Font-family: Helvetica,Arial,sans-serif;Font-size: 27%;color: #888;letter-spacing: 1px;Font-weight: 100; }

以下是之前和之后：

我已经搜索了StackOverflow,但我不确定如何继续.我读过一个< br />只标记换行符,但它继承了行间距,行间距:(值)不起作用,也没有边距或填充.

我需要的是一个简单的跨浏览器解决方案.我使用Chrome浏览器截屏.不需要支持ie6-7,但支持ie8会很好.

解决方法 问题是由标题元素的默认行高引起的.默认值取决于浏览器和字体,但它往往是字体大小的1.1到1.3倍.在任何情况下,如果设置了非常大的字体大小,则会产生问题,因为行高值也会设置第二行的高度.根据CSS规范,对于块元素,line-height设置线框的最小高度.

有很多方法可以解决这个问题.设置显示：小元素上的块是单向的,因此它的默认行高将根据自己的字体大小确定.另一种方法是设置一个比字体大小小得多的线高,例如

h1.banner { line-height: 0.5; }

总结

以上是内存溢出为你收集整理的html – 控制标题标记内标记的行高？全部内容，希望文章能够帮你解决html – 控制标题标记内标记的行高？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。