CODEWITHSUNDEEP
htmlcsspadding
Keegan Brown
Keegan Brown

Reputation: 213

padding not working in span tag

Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).

Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?

Here is my current code to create a space without <br></br>:

#beforeImage span {
  padding: 40px;
}
<span id="beforeImage">text</span>

Upvotes: 18

Views: 38876

Answers (3)

dippas
dippas

Reputation: 60563

2 things to fix:

  • you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.

  • span won't have padding because it is an inline element by default, so set inline-block or block

Snippet

#beforeImage {
  padding: 40px;
  display: inline-block; /* or block */
 /* demo */
  background: red
 
}
<span id="beforeImage">Foo bar</span>

Upvotes: 31

G-Cyrillus
G-Cyrillus

Reputation: 105893

<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).

You might look for:

span{
    display:inline-block;
    padding: 40px;
}

beside, br could still be used

 br {
  line-height:3em;
  vertical-align:top;/* debug FF/IE */
}

http://codepen.io/anon/pen/GoVdYY

But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?

Upvotes: 4

redandblue
redandblue

Reputation: 770

Can simply target the Id of the span:

#beforeImage{
        display:inline-block;
        padding: 40px;
        }

Or all spans:

span{
display:inline-block;
padding: 40px;
}

Upvotes: 1

Related Questions