CODEWITHSUNDEEP
css
ryan
ryan

Reputation: 21

How to align span with inline-block attribute with other spans?

I need to set inline-block attribute on one of the spans to set width on it. But after that, I find it doesn't align with other "inline" spans on firefox. It works well on IE, though. See the following html snip

<span class="" style="font-family: Times New Roman; font-size: 22pt; background-color: rgb(229, 102, 0);">123123</span><span class="qqeditor-display-tab" style="display:inline-block;font-family: Times New Roman; font-size: 22pt; width: 22px; background-color: rgb(229, 102, 0); height: 33px;">aaa</span><span style="font-family: Times New Roman; font-size: 22pt; background-color: rgb(229, 102, 0);">123</span>

Is there a way that I can align these three spans on firefox? Thanks!

Upvotes: 2

Views: 6463

Answers (2)

0b10011
0b10011

Reputation: 18785

This actually sounds like a line-height issue. Setting the line-height to normal on those elements should do the trick.

The reason why line-height would affect the background is because line-height on an inline element doesn't affect the height of the text (which is what you're applying the background to), while line-height on an inline-block element does affect the height of the element. While I could go into more detail as to how this works, I think we'd find out just how many words an example is worth, so here's an example instead:

Example of how line-height affects background and border / outline.

Source, in case jsFiddle disappears

HTML

<p class="a">normal <span class="inline">A</span><span class="inline-block">B</span></p>
<p class="b">2em <span class="inline">A</span><span class="inline-block">B</span></p>
<p class="c">.5em <span class="inline">A</span><span class="inline-block">B</span></p>

CSS

.a span {
    line-height:normal;
}
.b span {
    line-height:2em;
}
.c span {
    line-height:10px;
}
.inline-block {
    display:inline-block;
}

span {
    font-size:2em;
    outline:1px solid red;
    background:lime;
}
p {
    margin:2em;
    outline:1px solid green;
}

Upvotes: 2

bookcasey
bookcasey

Reputation: 40433

Is setting them all inline-block;, especially in a way that works cross-browser not acceptable?

Demo

Upvotes: 0

Related Questions