Question

我遇到了行高问题。有没有办法减少线高并移动i元素至少接近汽油背景触摸，因为它不可能使用负值作为线高？

HTML：

<i>Nummer eins</i><br>
<i>Nummer zwei</i>

CSS：

@import url(http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);

i {
font-family: "Lora", serif;
font-size: 0.8em;       
font-weight: normal;
line-height: 0em;
padding: 0px 3px;
color: white;
background-color: #406A76;
}

提前致谢！

Answer 1

检查这是否可以解决您的问题jsfiddle

html

<i>Nummer eins</i>  //  iremoved the br tag
<i>Nummer zwei</i>

CSS

i {  // line height removed
  font-family: "Lora", serif;
  font-size: 0.8em;
  font-weight: normal;
  padding: 0px 3px;
  color: white;
  background-color: #406A76;
  float: left;    //added float left here 
  clear: both;   //added clear both
}

Answer 2

如果您的目标是消除两条线之间的白条，那么将它们放在<div>或<span>（我使用的跨度）中可能是一个很好的解决方案

JSFiddle

HTML

<span>
<i>Nummer eins</i><br>
<i>Nummer zwei</i>
</span>

CSS

@import url(http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);

i {
    font-family: "Lora", serif;
    font-size: 0.8em;       
    font-weight: normal;
    line-height: 0em;
    padding: 0px 3px;
    color: white;
    background-color: #406A76;
}
span {
     background-color: #406A76;
}

减少两个i元素之间的行高

2 个答案: