css newbie looking for a more elegant css solution to indent text

Question

I have the following css class:

#header h1 {
 float:left;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 2.5em;
 margin-top: 8px;
 margin-left: 0.8em;
 padding-left: 40px;
 background: url("h1bkgrnd.png") no-repeat left center;
 height: 100px;
}

And this html:

 <div id="header">
 <h1><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Our Services</h1>
</div>

it works fine, but as you can see, I have a bunch of   to push the text to the right. Otherwise, it sits on top of the picture. Is there a better way to do this?

Thanks.

• Explosion Pills: If you want the picture to be part of the flow of the document use an <img> tag instead of a background image with CSS
• PlantTheIdea: you really shouldn't have the <br> components in your <h1>. if you want it a distance from the top, use margins or padding appropriately.
• JJJ: Can't you just give it more padding?
• cimmanon: From the responses you're giving, its clear that what you're looking for is more than just indenting text (see: the XY problem). cssdeck.com/labs/ybwmvl1d
• dot: ok thanks cimmanon. i'll keep that in mind for my next post.

Answer 1

Unsurprisingly, to indent text you should use the text-indent CSS property.

#header h1 {
 text-indent: 1em;
 /* ... */
}

• cimmanon: Are you sure it doesn't work? Because it looks like it works to me: cssdeck.com/labs/vn8ewsh7
• dot: meagar... i lied. your way does work too. but i realize why my brain defaulted to "that doesn't work" is because I wasn't able to find a way to push the text down without affecting the image. the <P> tag gives me the ability to control both. but i've marked your answer as useful! thanks!!
• user229044: @dot Don't do that. Putting a <p> inside your <h1> is invalid HTML.
• dot: meager if i don't use the <p> tag, what's the best way to push the text down (like a margin-top) without affecting the img? i am limited in what I can do because I cannot actually change the html. i have to accomplish everything via css. otherwise, i'd just add an <img> element
• dot: the html is a part of a template library which i'm not allowed to change. I'm just creating a "skin" if you will...

Answer 2

Add:

#header h1 {
 padding-left: 20px; /*Or according with the picture size you have*/
}

Must work.

Answer 3

You have a few choices, but text-indent seems the most appropriate.

Answer 4

It depends, what are you trying to indent, are you indenting from another element or from another text.

p {
 margin-left: 20px;
}
p {
 text-indent: 20px;
}

• dot: this worked. i added a p tag inside h1... and then used the text indent. and its happy
• cimmanon: @dot Why would you do that? The other answers do not require additional markup.
• cimmanon: You can control the top margin on the h1 as well... This is the least elegant solution.
• user229044: This is semantically broken. You shouldn't be putting a <p> inside your <h1>, that's not even valid HTML.
• cimmanon: @Cam Except for the part where margin isn't going to help here. The OP wants to shift the text so that it isn't overlapping the background image. Christian's answer (to use padding) is the next correct solution after meagar's.

Answer 5

Separating out the image in an image tag looks like the best option if you do not really want the image to be in the background of the text.

HTML:

<img src="http://placekitten.com/g/50/100"/>
<h1>Our Services</h1>

CSS:

img{
 float:left;
 width:50px;
 height: 50px;
}
h1{
 padding-left: 60px;
}

http://cssdeck.com/labs/xixebfxw. In this case, I had to re-size the image by giving appropriate width and height as the text! Also margin-left also can be used alternatively for padding-left.

And if the spacing is not a matter of concern and you just need to place the text to the right and image in the left without removing the image as the the background, you can do: http://cssdeck.com/labs/wml9occf But this may not be the best option.