CODEWITHSUNDEEP
htmlcss
Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

CSS property "text-indent" not working with html span element

For example:-

HTML Code

<div>
     <h1><span class="title-icon">icon</span> Hello India!</h1>
</div>

CSS Code

h1{
}

h1 span{
    background: url("../images/icon.png")
    text-indent: -9999px;
    width:24px;
    height:24px;
    margin-right:1em;
}

Upvotes: 25

Views: 35932

Answers (3)

HasanG
HasanG

Reputation: 13161

My problem was with text-align. In case you modify align mode of the element or parent element(s) wrapping it to left, you must give a negative index for text-indent. Otherwise you must give a positive value.

.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

Otherwise

.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}

Upvotes: 2

Vladimir Bozic
Vladimir Bozic

Reputation: 444

Try setting font-size to zero:

h1 span {
    background: url("../images/icon.png")
    font-size: 0;
    width: 24px;
    height: 24px;
    margin-right: 1em;
}

Upvotes: 7

Spudley
Spudley

Reputation: 168685

text-indent doesn't work on inline elements. <span> defaults to being inline. You need to change it so it works as an inline block:

display:inline-block;

Upvotes: 32

Related Questions