css下划线下边距

p { margin-top: 20px; text-decoration: underline; text-underline-position: under; -moz-text-underline-position: under; -webkit-text-underline-position: under; -ms-text-underline-position: under; } pre { background-color: #eee; padding: 10px; }

在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前缀。

通过上述方式，就可以让下划线与文本之间保留合适的距离，使文本更加美观。