【问题标题】:spacing between text and underline文本和下划线之间的间距
【发布时间】:2013-12-01 15:02:52
【问题描述】:

我正在寻找一种方法来扩大我页面上的文本和下划线之间的距离。我主要使用 CSS,但我也必须使用标签,基本上我的问题考虑了这两种情况。有没有办法改变这个间距?代码很简单:

.title_span {
 font-weight: bold;
 text-decoration: underline;
 color: grey;
}

我的另一个可能性是尝试以某种方式使用 1px 图片的跨度背景并在 X 轴上重复我正在寻找更清洁的解决方案。

【问题讨论】:

标签: html css


【解决方案1】:

恐怕这本身是不可能的,但你可以做的是应用border-bottom 来替代background-image

【讨论】:

    【解决方案2】:

    文本之间的间距并在其下划线,但您可以使用诸如border-bottom: 1px solid #000 和padding-bottom: 3px 之类的东西。

    编辑:如果您想要“下划线”的相同颜色(在我的示例中是边框),您只需省略颜色声明,即border-bottom-width:1px 和border-bottom-style:solid .

    【讨论】:

      【解决方案3】:

      不是没有技巧,不是。一个简单的解决方案是将文本包装在另一个 span 中并为其设置下边框。

      <span class="underline"><span class="title_span">title of something</span></span>
      
      .title_span {
       font-weight: bold;
       text-decoration: underline;
       color: grey;
      }
      
      .underline {
          padding-bottom: 2px;
          border-bottom: grey 1px solid;
      }
      

      http://jsfiddle.net/m9RQ9/

      【讨论】:

      • 不需要额外的wrapper,可以直接在.title_span里面传递边框属性:jsfiddle.net/m9RQ9/2
      • 当我将 padding-left 应用于 title_span 时,下划线保持在初始位置。它应该沿着文本移动。 @Aaron Digulla
      • @Tayyab_Hussain:填充物在盒子里面。试试边距。
      猜你喜欢
      • 2010-12-16
      • 2015-10-13
      • 2020-09-18
      • 2012-09-20
      • 1970-01-01
      • 2021-04-12
      • 1970-01-01
      • 2011-03-06
      相关资源
      最近更新 更多