N005 text-decoration与border-bottom的使用



作为构建网页间关系的基本方式,超链接(hyperlink)应用极为广泛,但涉及到下划线时,相似属性text-decorationborder-bottom却让我困惑了很久。通过研究终有所获,下面是一些结论和想法。

本质区别

text-decoration本质上是对文本的修饰。不仅可以是下划线(underline),还可以是上划线(overline)或者贯穿线(line-through)。由于链接默认是带有下划线的,所以可以将text-decoration设值none来清除下划线。

border-bottom则是来源于盒模式。对border-bottom属性的设定实际上就是对border的具体设定,因此还可以配合padding-bottom一起使用。

效果差异

由于二者的来源不同,实际的效果差异也是很明显的。下面分别对中英文和两种属性的显示效果进行对比展示:

具体样式 实际效果
中:text-decoration text-decoration:underline; 开发
中:border-bottom text-decoration:none;
border-bottom:solid;
开发
英:text-decoration text-decoration:underline; development
英:border-bottom text-decoration:none;
border-bottom:solid;
development

从上表可以看出,无论是中文还是英文,text-decoration控制下的下划线会显得与文字很拥挤,几乎是贴近的。而英文显示中更是糟糕,尤其是跟某些字母(g j p q y)搭配时会贯穿其下部。字体很小时可能影响程度更大。而border-bottom配合padding-bottom属性可以更好的控制这个距离,获取更佳的视觉效果。(但不能超过行距影响了下一行!)

如何取舍

现在可以下结论了:为了获取最佳的下划线效果,我们要尽量避免使用装饰线,而选择用边框的替代方案。

参考文章

评论