Wird in html die Zeilenhöhe dem Span-Element-Buggy zugewiesen?

Question

In dieser Geige http://jsfiddle.net/qhsnX/3/ können Sie sehen, dass ich 100px Zeilenhöhe nur dem Span-Element zugewiesen haben, aber dies gibt auch die gleiche Zeilenhöhe zum Text nach dem Span-Element. Der gleiche Code:

#titleBox { 
 
    margin: 0 auto; 
 
    width: 350px; 
 
    background-color: #6da662; 
 
    height: 100px; 
 
    color: #fff; 
 
    font-size: 16.5px; 
 
    font-weight: bold; 
 
} 
 
span { 
 
    line-height: 100px; 
 
}

<div id="titleBox"> <span>I have 100px line height. || </span> I have 0 line height</div>

Nicht nur das kann ich nicht die Zeilenhöhe von anderen nach dem ersten ein span-Element ändern. http://jsfiddle.net/qhsnX/4/

#titleBox { 
 
    margin: 0 auto; 
 
    width: 350px; 
 
    background-color: #6da662; 
 
    height: 100px; 
 
    color: #fff; 
 
    font-size: 16.5px; 
 
    font-weight: bold; 
 
} 
 
#one { 
 
    line-height: 100px; 
 
} 
 
#two { 
 
    line-height: 10px; 
 
    color: black; 
 
}

<div id="titleBox"> <span id="one">I have 100px line height. || </span> <span id="two">I have 10px line height </span> 
 
</div>

Ist das ein Fehler in HTML-Sprache?

Answer 1

Zeilenhöhe verwendet Raum zwischen Linien darzustellen, und ist an ein Blockelement aufgebracht nicht für die Inline-Element. Sie können entweder die Spanne ändern div oder Sie können Verwendung „display: inline-block“ Eigenschaft in CSS