p { margin-top: 20px; text-decoration: underline; text-underline-position: under; -moz-text-underlin
在CSS中,下划线是一种常见的文本修饰方式。使用text-decoration属性就可以为文本添加下划线。但是,下划线的下边距可能不会如你所愿。
下划线的下边距指的是文本底部到下划线的距离。下边距太小会导致下划线与文本重叠,太大则显得不协调。因此,我们需要掌握调整下划线下边距的方法。
text-decoration: underline; /* 添加下划线 */ text-underline-position: under; /* 等同于text-decoration-skip-ink: none */ -moz-text-underline-position: under; /* Firefox浏览器兼容 */ -webkit-text-underline-position: under; /* Safari和Chrome浏览器兼容 */ -ms-text-underline-position: under; /* IE浏览器兼容 */
使用text-underline-position属性可以设置下划线基线的位置。默认值是auto,即根据字体大小自动计算下边距。而under值则将下划线基线设置在文本底部下方,可以避免下划线与文本重叠。
总的来说,要调整下划线下边距,就需要设置text-underline-position为under。同时,为了兼容不同浏览器,还需要添加-moz、-webkit和-ms前缀。
通过上述方式,就可以让下划线与文本之间保留合适的距离,使文本更加美观。
粉丝
0
关注
0
收藏
0